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

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

@@ -1,7 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { warnOnce } from '@mui/x-internals/warning';
 import { usePickerValue } from "./usePickerValue.js";
 import { usePickerViews } from "./usePickerViews.js";
-import { usePickerLayoutProps } from "./usePickerLayoutProps.js";
 import { usePickerProvider } from "./usePickerProvider.js";
 export const usePicker = ({
   props,
@@ -35,19 +35,13 @@ export const usePicker = ({
     propsFromPickerValue: pickerValueResponse.viewProps,
     rendererInterceptor
   });
-  const pickerLayoutResponse = usePickerLayoutProps({
-    props,
-    variant,
-    propsFromPickerValue: pickerValueResponse.layoutProps,
-    propsFromPickerViews: pickerViewsResponse.layoutProps
-  });
   const providerProps = usePickerProvider({
     props,
-    pickerValueResponse,
     localeText,
     valueManager,
     variant,
-    views: pickerViewsResponse.views
+    views: pickerViewsResponse.views,
+    paramsFromUsePickerValue: pickerValueResponse.provider
   });
   return {
     // Picker value
@@ -59,7 +53,7 @@ export const usePicker = ({
     hasUIView: pickerViewsResponse.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
-    layoutProps: pickerLayoutResponse.layoutProps,
+    layoutProps: _extends({}, pickerViewsResponse.layoutProps, pickerValueResponse.layoutProps),
     // Picker provider
     providerProps,
     // Picker owner state

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useUtils } from "../useUtils.js";
@@ -36,31 +37,28 @@ export const usePickerOrientation = (views, customOrientation) => {
 export function usePickerProvider(parameters) {
   const {
     props,
-    pickerValueResponse,
     valueManager,
     localeText,
     variant,
-    views
+    views,
+    paramsFromUsePickerValue
   } = parameters;
   const utils = useUtils();
   const orientation = usePickerOrientation(views, props.orientation);
   const ownerState = React.useMemo(() => ({
-    isPickerValueEmpty: valueManager.areValuesEqual(utils, pickerValueResponse.viewProps.value, valueManager.emptyValue),
-    isPickerOpen: pickerValueResponse.open,
+    isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
+    isPickerOpen: paramsFromUsePickerValue.contextValue.open,
     isPickerDisabled: props.disabled ?? false,
     isPickerReadOnly: props.readOnly ?? false,
     pickerOrientation: orientation,
     pickerVariant: variant
-  }), [utils, valueManager, pickerValueResponse.viewProps.value, pickerValueResponse.open, orientation, variant, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => ({
-    onOpen: pickerValueResponse.actions.onOpen,
-    onClose: pickerValueResponse.actions.onClose,
-    open: pickerValueResponse.open,
+  }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
+  const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, {
     disabled: props.disabled ?? false,
     readOnly: props.readOnly ?? false,
     variant,
     orientation
-  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open, variant, orientation, props.disabled, props.readOnly]);
+  }), [paramsFromUsePickerValue.contextValue, variant, orientation, props.disabled, props.readOnly]);
   const privateContextValue = React.useMemo(() => ({
     ownerState
   }), [ownerState]);

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

@@ -5,7 +5,6 @@ import { useOpenState } from "../useOpenState.js";
 import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { useValidation } from "../../../validation/index.js";
 import { useValueWithTimezone } from "../useValueWithTimezone.js";
-
 /**
  * Decide if the new value should be published
  * The published value will be passed to `onChange` if defined.
@@ -151,8 +150,8 @@ export const usePickerValue = ({
   const utils = useUtils();
   const adapter = useLocalizationContext();
   const {
-    isOpen,
-    setIsOpen
+    open,
+    setOpen
   } = useOpenState(props);
   const {
     timezone,
@@ -238,7 +237,7 @@ export const usePickerValue = ({
       onAccept(action.value, getContext());
     }
     if (shouldClose) {
-      setIsOpen(false);
+      setOpen(false);
     }
   });
   if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
@@ -289,11 +288,11 @@ export const usePickerValue = ({
   });
   const handleOpen = useEventCallback(event => {
     event.preventDefault();
-    setIsOpen(true);
+    setOpen(true);
   });
   const handleClose = useEventCallback(event => {
     event?.preventDefault();
-    setIsOpen(false);
+    setOpen(false);
   });
   const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
@@ -324,12 +323,12 @@ export const usePickerValue = ({
     value: dateState.draft,
     onChange: handleChangeFromField
   };
-  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
+  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onClose: handleClose,
-    open: isOpen
+    open
   };
   const isValid = testedValue => {
     const error = validator({
@@ -341,16 +340,27 @@ export const usePickerValue = ({
     return !valueManager.hasError(error);
   };
   const layoutResponse = _extends({}, actions, {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onSelectShortcut: handleSelectShortcut,
     isValid
   });
+  const contextValue = React.useMemo(() => {
+    return {
+      open,
+      setOpen
+    };
+  }, [open, setOpen]);
+  const providerParams = {
+    value: valueWithoutError,
+    contextValue
+  };
   return {
-    open: isOpen,
+    open,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions
+    actions,
+    provider: providerParams
   };
 };

package/modern/internals/index.js

@@ -12,6 +12,7 @@ export { PickersToolbarButton } from "./components/PickersToolbarButton.js";
 export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from "./constants/dimensions.js";
 export { useControlledValueWithTimezone } from "./hooks/useValueWithTimezone.js";
 export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.js";
+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";

package/modern/internals/models/pickers.js

@@ -0,0 +1 @@
+export {};

package/modern/locales/nlNL.js

@@ -16,10 +16,10 @@ const nlNLPickers = {
   // DateRange labels
   start: 'Start',
   end: 'Einde',
-  startDate: 'Start datum',
-  startTime: 'Start tijd',
-  endDate: 'Eind datum',
-  endTime: 'Eind tijd',
+  startDate: 'Startdatum',
+  startTime: 'Starttijd',
+  endDate: 'Einddatum',
+  endTime: 'Eindtijd',
   // Action bar
   cancelButtonLabel: 'Annuleren',
   clearButtonLabel: 'Resetten',
@@ -50,11 +50,11 @@ const nlNLPickers = {
   timeTableLabel: 'kies tijd',
   dateTableLabel: 'kies datum',
   // Field section placeholders
-  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
+  fieldYearPlaceholder: params => 'J'.repeat(params.digitAmount),
   fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
   fieldDayPlaceholder: () => 'DD',
   fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
-  fieldHoursPlaceholder: () => 'hh',
+  fieldHoursPlaceholder: () => 'uu',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
   fieldMeridiemPlaceholder: () => 'aa',
@@ -68,6 +68,6 @@ const nlNLPickers = {
   seconds: 'Seconden',
   meridiem: 'Middag',
   // Common
-  empty: 'Legen'
+  empty: 'Leeg'
 };
 export const nlNL = getPickersLocalization(nlNLPickers);

package/modern/validation/useValidation.js

@@ -5,7 +5,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { useLocalizationContext } from "../internals/hooks/useUtils.js";
 /**
  * Utility hook to check if a given value is valid based on the provided validation props.
- * @template TValue The value type. It will be either the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+ * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
  * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
  * @param {UseValidationOptions<TValue, TError, TValidationProps>} options The options to configure the hook.
  * @param {TValue} options.value The value to validate.

package/modern/validation/validateDate.js

@@ -5,6 +5,14 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Date Picker, Date Field and Date Calendar components.
  */
 
+/**
+ * Validation props as received by the validateDate method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateDate method.
+ */
+
 export const validateDate = ({
   props,
   value,

package/modern/validation/validateDateTime.js

@@ -6,6 +6,14 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Date Time Picker and Date Time Field components.
  */
 
+/**
+ * Validation props as received by the validateDateTime method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateDateTime method.
+ */
+
 export const validateDateTime = ({
   adapter,
   value,

package/modern/validation/validateTime.js

@@ -5,6 +5,14 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Time Picker, Time Field and Clock components.
  */
 
+/**
+ * Validation props as received by the validateTime method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateTime method.
+ */
+
 export const validateTime = ({
   adapter,
   value,

package/node/AdapterMoment/AdapterMoment.js

@@ -438,12 +438,22 @@ class AdapterMoment {
       const end = this.endOfWeek(this.endOfMonth(value));
       let count = 0;
       let current = start;
+      let currentDayOfYear = current.get('dayOfYear');
       const nestedWeeks = [];
       while (current.isBefore(end)) {
         const weekNumber = Math.floor(count / 7);
         nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
         nestedWeeks[weekNumber].push(current);
+        const prevDayOfYear = currentDayOfYear;
         current = this.addDays(current, 1);
+        currentDayOfYear = current.get('dayOfYear');
+
+        // If there is a TZ change at midnight, adding 1 day may only increase the date by 23 hours to 11pm
+        // To fix, bump the date into the next day (add 12 hours) and then revert to the start of the day
+        // See https://github.com/moment/moment/issues/4743#issuecomment-811306874 for context.
+        if (prevDayOfYear === currentDayOfYear) {
+          current = current.add(12, 'h').startOf('day');
+        }
         count += 1;
       }
       return nestedWeeks;

package/node/DateCalendar/PickersFadeTransitionGroup.js

@@ -14,10 +14,7 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _pickersFadeTransitionGroupClasses = require("./pickersFadeTransitionGroupClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -44,9 +41,10 @@ function PickersFadeTransitionGroup(inProps) {
     children,
     className,
     reduceAnimations,
-    transKey
+    transKey,
+    classes: classesProp
   } = props;
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   const theme = (0, _styles.useTheme)();
   if (reduceAnimations) {
     return children;

package/node/DateCalendar/PickersSlideTransition.js

@@ -14,11 +14,11 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _reactTransitionGroup = require("react-transition-group");
 var _pickersSlideTransitionClasses = require("./pickersSlideTransitionClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "reduceAnimations", "slideDirection", "transKey", "classes"];
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
     slideDirection
   } = ownerState;
   const slots = {
@@ -107,11 +107,18 @@ function PickersSlideTransition(inProps) {
       children,
       className,
       reduceAnimations,
-      transKey
-      // extracting `classes` from `other`
+      slideDirection,
+      transKey,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    slideDirection
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
   const theme = (0, _styles.useTheme)();
   if (reduceAnimations) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/node/DateField/DateField.js

@@ -19,6 +19,7 @@ var _useDateField = require("./useDateField");
 var _hooks = require("../hooks");
 var _PickersTextField = require("../PickersTextField");
 var _convertFieldResponseIntoMuiTextFieldProps = require("../internals/utils/convertFieldResponseIntoMuiTextFieldProps");
+var _useFieldOwnerState = require("../internals/hooks/useFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
 /**
@@ -43,7 +44,7 @@ const DateField = exports.DateField = /*#__PURE__*/React.forwardRef(function Dat
       inputProps
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = (0, _useFieldOwnerState.useFieldOwnerState)(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const textFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
@@ -274,10 +275,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   shouldDisableYear: _propTypes.default.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/node/DateTimeField/DateTimeField.js

@@ -19,6 +19,7 @@ var _useDateTimeField = require("./useDateTimeField");
 var _hooks = require("../hooks");
 var _PickersTextField = require("../PickersTextField");
 var _convertFieldResponseIntoMuiTextFieldProps = require("../internals/utils/convertFieldResponseIntoMuiTextFieldProps");
+var _useFieldOwnerState = require("../internals/hooks/useFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
 /**
@@ -43,7 +44,7 @@ const DateTimeField = exports.DateTimeField = /*#__PURE__*/React.forwardRef(func
       inputProps
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = (0, _useFieldOwnerState.useFieldOwnerState)(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const textFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
@@ -314,10 +315,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   shouldDisableYear: _propTypes.default.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/node/DateTimePicker/DateTimePickerTabs.js

@@ -18,6 +18,7 @@ var _icons = require("../icons");
 var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _dateTimePickerTabsClasses = require("./dateTimePickerTabsClasses");
 var _dateUtils = require("../internals/utils/date-utils");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const viewToTab = view => {
   if ((0, _dateUtils.isDatePickerView)(view)) {
@@ -31,10 +32,7 @@ const tabToView = tab => {
   }
   return 'hours';
 };
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -79,10 +77,14 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
     view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     className,
+    classes: classesProp,
     sx
   } = props;
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const classes = useUtilityClasses(classesProp);
   const handleChange = (event, value) => {
     onViewChange(tabToView(value));
   };
@@ -90,7 +92,7 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerTabsRoot, {
-    ownerState: props,
+    ownerState: ownerState,
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,

package/node/DayCalendarSkeleton/DayCalendarSkeleton.js

@@ -18,11 +18,8 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _dimensions = require("../internals/constants/dimensions");
 var _dayCalendarSkeletonClasses = require("./dayCalendarSkeletonClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["className", "classes"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     week: ['week'],
@@ -52,14 +49,9 @@ const DayCalendarSkeletonDay = (0, _styles.styled)(_Skeleton.default, {
   overridesResolver: (props, styles) => styles.daySkeleton
 })({
   margin: `0 ${_dimensions.DAY_MARGIN}px`,
-  variants: [{
-    props: {
-      day: 0
-    },
-    style: {
-      visibility: 'hidden'
-    }
-  }]
+  '&[data-day-in-month="0"]': {
+    visibility: 'hidden'
+  }
 });
 const monthMap = [[0, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 0, 0, 0]];
 
@@ -78,23 +70,22 @@ function DayCalendarSkeleton(inProps) {
     name: 'MuiDayCalendarSkeleton'
   });
   const {
-      className
+      className,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const classes = useUtilityClasses(other);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DayCalendarSkeletonRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className)
   }, other, {
     children: monthMap.map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DayCalendarSkeletonWeek, {
       className: classes.week,
-      children: week.map((day, index2) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DayCalendarSkeletonDay, {
+      children: week.map((dayInMonth, index2) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DayCalendarSkeletonDay, {
         variant: "circular",
         width: _dimensions.DAY_SIZE,
         height: _dimensions.DAY_SIZE,
         className: classes.daySkeleton,
-        ownerState: {
-          day
-        }
+        "data-day-in-month": dayInMonth
       }, index2))
     }, index))
   }));

package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -1,41 +1,39 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DesktopDateTimePickerLayout = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _RtlProvider = require("@mui/system/RtlProvider");
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _PickersLayout = require("../PickersLayout");
+var _usePickerContext = require("../hooks/usePickerContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
  */
 const DesktopDateTimePickerLayout = exports.DesktopDateTimePickerLayout = /*#__PURE__*/React.forwardRef(function DesktopDateTimePickerLayout(props, ref) {
-  const isRtl = (0, _RtlProvider.useRtl)();
   const {
     toolbar,
     tabs,
     content,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   } = (0, _PickersLayout.usePickerLayout)(props);
+  const {
+    orientation
+  } = (0, _usePickerContext.usePickerContext)();
   const {
     sx,
     className,
-    isLandscape,
     classes
   } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
-  const ownerState = (0, _extends2.default)({}, props, {
-    isRtl
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutRoot, {
     ref: ref,
     className: (0, _clsx.default)(_PickersLayout.pickersLayoutClasses.root, classes?.root, className),
@@ -49,8 +47,9 @@ const DesktopDateTimePickerLayout = exports.DesktopDateTimePickerLayout = /*#__P
       }
     }, ...(Array.isArray(sx) ? sx : [sx])],
     ownerState: ownerState,
-    children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutContentWrapper, {
+    children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutContentWrapper, {
       className: (0, _clsx.default)(_PickersLayout.pickersLayoutClasses.contentWrapper, classes?.contentWrapper),
+      ownerState: ownerState,
       sx: {
         display: 'grid'
       },
@@ -74,11 +73,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  isLandscape: _propTypes.default.bool.isRequired,
-  /**
-   * `true` if the application is in right-to-left direction.
-   */
-  isRtl: _propTypes.default.bool.isRequired,
   isValid: _propTypes.default.func.isRequired,
   onAccept: _propTypes.default.func.isRequired,
   onCancel: _propTypes.default.func.isRequired,
@@ -90,10 +84,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
   onSelectShortcut: _propTypes.default.func.isRequired,
   onSetToday: _propTypes.default.func.isRequired,
   onViewChange: _propTypes.default.func.isRequired,
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
   /**
    * The props used for each component slot.
    * @default {}
@@ -108,8 +98,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  value: _propTypes.default.any,
+  value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
-  wrapperVariant: _propTypes.default.oneOf(['desktop', 'mobile'])
+  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
 } : void 0;

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