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

package/modern/DayCalendarSkeleton/DayCalendarSkeleton.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
+const _excluded = ["className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,10 +12,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
 import { getDayCalendarSkeletonUtilityClass } from "./dayCalendarSkeletonClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     week: ['week'],
@@ -45,14 +42,9 @@ const DayCalendarSkeletonDay = styled(Skeleton, {
   overridesResolver: (props, styles) => styles.daySkeleton
 })({
   margin: `0 ${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]];
 
@@ -71,23 +63,22 @@ function DayCalendarSkeleton(inProps) {
     name: 'MuiDayCalendarSkeleton'
   });
   const {
-      className
+      className,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(other);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(DayCalendarSkeletonRoot, _extends({
     className: clsx(classes.root, className)
   }, other, {
     children: monthMap.map((week, index) => /*#__PURE__*/_jsx(DayCalendarSkeletonWeek, {
       className: classes.week,
-      children: week.map((day, index2) => /*#__PURE__*/_jsx(DayCalendarSkeletonDay, {
+      children: week.map((dayInMonth, index2) => /*#__PURE__*/_jsx(DayCalendarSkeletonDay, {
         variant: "circular",
         width: DAY_SIZE,
         height: DAY_SIZE,
         className: classes.daySkeleton,
-        ownerState: {
-          day
-        }
+        "data-day-in-month": dayInMonth
       }, index2))
     }, index))
   }));

package/modern/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -1,33 +1,31 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useRtl } from '@mui/system/RtlProvider';
 import Divider from '@mui/material/Divider';
 import { PickersLayoutContentWrapper, PickersLayoutRoot, pickersLayoutClasses, usePickerLayout } from "../PickersLayout/index.js";
+import { usePickerContext } from "../hooks/usePickerContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */
 const DesktopDateTimePickerLayout = /*#__PURE__*/React.forwardRef(function DesktopDateTimePickerLayout(props, ref) {
-  const isRtl = useRtl();
   const {
     toolbar,
     tabs,
     content,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   } = usePickerLayout(props);
+  const {
+    orientation
+  } = usePickerContext();
   const {
     sx,
     className,
-    isLandscape,
     classes
   } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
-  const ownerState = _extends({}, props, {
-    isRtl
-  });
   return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
     ref: ref,
     className: clsx(pickersLayoutClasses.root, classes?.root, className),
@@ -41,8 +39,9 @@ const DesktopDateTimePickerLayout = /*#__PURE__*/React.forwardRef(function Deskt
       }
     }, ...(Array.isArray(sx) ? sx : [sx])],
     ownerState: ownerState,
-    children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/_jsxs(PickersLayoutContentWrapper, {
+    children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/_jsxs(PickersLayoutContentWrapper, {
       className: clsx(pickersLayoutClasses.contentWrapper, classes?.contentWrapper),
+      ownerState: ownerState,
       sx: {
         display: 'grid'
       },
@@ -66,11 +65,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  isLandscape: PropTypes.bool.isRequired,
-  /**
-   * `true` if the application is in right-to-left direction.
-   */
-  isRtl: PropTypes.bool.isRequired,
   isValid: PropTypes.func.isRequired,
   onAccept: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
@@ -82,10 +76,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
   onSelectShortcut: PropTypes.func.isRequired,
   onSetToday: PropTypes.func.isRequired,
   onViewChange: PropTypes.func.isRequired,
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: PropTypes.oneOf(['landscape', 'portrait']),
   /**
    * The props used for each component slot.
    * @default {}
@@ -100,9 +90,8 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  value: PropTypes.any,
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
-  wrapperVariant: PropTypes.oneOf(['desktop', 'mobile'])
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
 } : void 0;
 export { DesktopDateTimePickerLayout };

package/modern/PickersActionBar/PickersActionBar.js

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

package/modern/PickersCalendarHeader/PickersCalendarHeader.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone", "format"],
+const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "classes", "timezone", "format"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -19,11 +19,9 @@ import { ArrowDropDownIcon } from "../icons/index.js";
 import { PickersArrowSwitcher } from "../internals/components/PickersArrowSwitcher/index.js";
 import { usePreviousMonthDisabled, useNextMonthDisabled } from "../internals/hooks/date-helpers-hooks.js";
 import { getPickersCalendarHeaderUtilityClass, pickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.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'],
     labelContainer: ['labelContainer'],
@@ -132,12 +130,15 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
       views,
       labelId,
       className,
+      classes: classesProp,
       timezone,
       format = `${utils.formats.month} ${utils.formats.year}`
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
   const switchViewButtonProps = useSlotProps({
     elementType: SwitchViewButton,

package/modern/PickersLayout/PickersLayout.js

@@ -7,14 +7,14 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { pickersLayoutClasses, getPickersLayoutUtilityClass } from "./pickersLayoutClasses.js";
 import usePickerLayout from "./usePickerLayout.js";
+import { usePickerContext } from "../hooks/usePickerContext.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    isLandscape,
-    classes
+    pickerOrientation
   } = ownerState;
   const slots = {
-    root: ['root', isLandscape && 'landscape'],
+    root: ['root', pickerOrientation === 'landscape' && 'landscape'],
     contentWrapper: ['contentWrapper']
   };
   return composeClasses(slots, getPickersLayoutUtilityClass, classes);
@@ -33,7 +33,7 @@ export const PickersLayoutRoot = styled('div', {
   },
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       [`& .${pickersLayoutClasses.toolbar}`]: {
@@ -47,7 +47,7 @@ export const PickersLayoutRoot = styled('div', {
     }
   }, {
     props: {
-      isLandscape: true,
+      pickerOrientation: 'landscape',
       isRtl: true
     },
     style: {
@@ -57,7 +57,7 @@ export const PickersLayoutRoot = styled('div', {
     }
   }, {
     props: {
-      isLandscape: false
+      pickerOrientation: 'portrait'
     },
     style: {
       [`& .${pickersLayoutClasses.toolbar}`]: {
@@ -71,7 +71,7 @@ export const PickersLayoutRoot = styled('div', {
     }
   }, {
     props: {
-      isLandscape: false,
+      pickerOrientation: 'portrait',
       isRtl: true
     },
     style: {
@@ -110,23 +110,28 @@ const PickersLayout = /*#__PURE__*/React.forwardRef(function PickersLayout(inPro
     content,
     tabs,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   } = usePickerLayout(props);
+  const {
+    orientation,
+    variant
+  } = usePickerContext();
   const {
     sx,
     className,
-    isLandscape,
-    wrapperVariant
+    classes: classesProp
   } = props;
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp, ownerState);
   return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
     ref: ref,
     sx: sx,
     className: clsx(classes.root, className),
-    ownerState: props,
-    children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/_jsx(PickersLayoutContentWrapper, {
+    ownerState: ownerState,
+    children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/_jsx(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,
-      children: wrapperVariant === 'desktop' ? /*#__PURE__*/_jsxs(React.Fragment, {
+      ownerState: ownerState,
+      children: variant === 'desktop' ? /*#__PURE__*/_jsxs(React.Fragment, {
         children: [content, tabs]
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
         children: [tabs, content]
@@ -145,11 +150,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  isLandscape: PropTypes.bool.isRequired,
-  /**
-   * `true` if the application is in right-to-left direction.
-   */
-  isRtl: PropTypes.bool.isRequired,
   isValid: PropTypes.func.isRequired,
   onAccept: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
@@ -161,10 +161,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   onSelectShortcut: PropTypes.func.isRequired,
   onSetToday: PropTypes.func.isRequired,
   onViewChange: PropTypes.func.isRequired,
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: PropTypes.oneOf(['landscape', 'portrait']),
   /**
    * The props used for each component slot.
    * @default {}
@@ -179,9 +175,8 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  value: PropTypes.any,
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
-  wrapperVariant: PropTypes.oneOf(['desktop', 'mobile'])
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
 } : void 0;
 export { PickersLayout };

package/modern/PickersLayout/usePickerLayout.js

@@ -4,20 +4,22 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import { PickersActionBar } from "../PickersActionBar/index.js";
 import { getPickersLayoutUtilityClass } from "./pickersLayoutClasses.js";
 import { PickersShortcuts } from "../PickersShortcuts/index.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
 }
 const useUtilityClasses = (classes, ownerState) => {
   const {
-    isLandscape
+    pickerOrientation
   } = ownerState;
   const slots = {
-    root: ['root', isLandscape && 'landscape'],
+    root: ['root', pickerOrientation === 'landscape' && 'landscape'],
     contentWrapper: ['contentWrapper'],
     toolbar: ['toolbar'],
     actionBar: ['actionBar'],
@@ -29,10 +31,14 @@ const useUtilityClasses = (classes, ownerState) => {
 };
 const usePickerLayout = props => {
   const {
-    ownerState: pickersOwnerState
+    ownerState: pickerOwnerState
   } = usePickerPrivateContext();
   const {
-    wrapperVariant,
+    variant,
+    orientation
+  } = usePickerContext();
+  const isRtl = useRtl();
+  const {
     onAccept,
     onClear,
     onCancel,
@@ -44,7 +50,6 @@ const usePickerLayout = props => {
     onChange,
     onSelectShortcut,
     isValid,
-    isLandscape,
     children,
     slots,
     slotProps,
@@ -54,9 +59,8 @@ const usePickerLayout = props => {
     // - For pickers value: PickerValidDate | null
     // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props;
-  const ownerState = _extends({}, pickersOwnerState, {
-    wrapperVariant,
-    isLandscape
+  const ownerState = _extends({}, pickerOwnerState, {
+    isRtl
   });
   const classes = useUtilityClasses(classesProp, ownerState);
 
@@ -70,7 +74,7 @@ const usePickerLayout = props => {
       onClear,
       onCancel,
       onSetToday,
-      actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
+      actions: variant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
     ownerState
@@ -83,7 +87,8 @@ const usePickerLayout = props => {
     elementType: Toolbar,
     externalSlotProps: slotProps?.toolbar,
     additionalProps: {
-      isLandscape,
+      isLandscape: orientation === 'landscape',
+      // Will be removed in a follow up PR?
       onChange,
       value,
       view,
@@ -113,7 +118,8 @@ const usePickerLayout = props => {
     externalSlotProps: slotProps?.shortcuts,
     additionalProps: {
       isValid,
-      isLandscape,
+      isLandscape: orientation === 'landscape',
+      // Will be removed in a follow up PR?
       onChange: onSelectShortcut
     },
     className: classes.shortcuts,
@@ -125,7 +131,8 @@ const usePickerLayout = props => {
     content,
     tabs,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   };
 };
 export default usePickerLayout;

package/modern/PickersShortcuts/PickersShortcuts.js

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

package/modern/TimeField/TimeField.js

@@ -13,6 +13,7 @@ import { useTimeField } from "./useTimeField.js";
 import { useClearableField } from "../hooks/index.js";
 import { PickersTextField } from "../PickersTextField/index.js";
 import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -36,7 +37,7 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, inRe
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -268,10 +269,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   shouldDisableTime: PropTypes.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/modern/hooks/useParsedFormat.js

@@ -8,7 +8,7 @@ import { getLocalizedDigits } from "../internals/hooks/useField/useField.utils.j
 import { usePickerTranslations } from "./usePickerTranslations.js";
 /**
  * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
- * This format is localized (e.g: `AAAA` for the year with the French locale) and cannot be parsed by your date library.
+ * This format is localized (for example `AAAA` for the year with the French locale) and cannot be parsed by your date library.
  * @param {object} The parameters needed to build the placeholder.
  * @param {string} params.format Format of the date to use.
  * @param {'dense' | 'spacious'} params.formatDensity Density of the format (setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character).

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-alpha.1
+ * @mui/x-date-pickers v8.0.0-alpha.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId"],
+const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId", "classes"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"];
 import * as React from 'react';
@@ -13,6 +13,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import IconButton from '@mui/material/IconButton';
 import { ArrowLeftIcon, ArrowRightIcon } from "../../../icons/index.js";
 import { getPickersArrowSwitcherUtilityClass } from "./pickersArrowSwitcherClasses.js";
+import { usePickerPrivateContext } from "../../hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PickersArrowSwitcherRoot = styled('div', {
   name: 'MuiPickersArrowSwitcher',
@@ -44,10 +45,7 @@ const PickersArrowSwitcherButton = styled(IconButton, {
     }
   }]
 });
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     spacer: ['spacer'],
@@ -78,11 +76,14 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       isPreviousHidden,
       onGoToPrevious,
       previousLabel,
-      labelId
+      labelId,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   const nextProps = {
     isDisabled: isNextDisabled,
     isHidden: isNextHidden,
@@ -108,7 +109,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       onClick: previousProps.goTo
     },
     ownerState: _extends({}, ownerState, {
-      hidden: previousProps.isHidden
+      hidden: previousProps.isHidden ?? false
     }),
     className: clsx(classes.button, classes.previousIconButton)
   });
@@ -125,7 +126,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       onClick: nextProps.goTo
     },
     ownerState: _extends({}, ownerState, {
-      hidden: nextProps.isHidden
+      hidden: nextProps.isHidden ?? false
     }),
     className: clsx(classes.button, classes.nextIconButton)
   });

package/modern/internals/hooks/useField/useFieldState.js

@@ -64,7 +64,6 @@ export const useFieldState = params => {
     const stateWithoutReferenceDate = {
       sections,
       value: valueFromTheOutside,
-      referenceValue: valueManager.emptyValue,
       tempValueStrAndroid: null
     };
     const granularity = getSectionTypeGranularity(sections);

package/modern/internals/hooks/useFieldOwnerState.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { usePickerPrivateContext } from "./usePickerPrivateContext.js";
+export function useFieldOwnerState(parameters) {
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  return React.useMemo(() => _extends({}, pickerOwnerState, {
+    isFieldDisabled: parameters.disabled ?? false,
+    isFieldReadOnly: parameters.readOnly ?? false
+  }), [pickerOwnerState, parameters.disabled, parameters.readOnly]);
+}

package/modern/internals/hooks/useOpenState.js

@@ -5,7 +5,7 @@ export const useOpenState = ({
   onClose
 }) => {
   const isControllingOpenProp = React.useRef(typeof open === 'boolean').current;
-  const [openState, setIsOpenState] = React.useState(false);
+  const [openState, setOpenState] = React.useState(false);
 
   // It is required to update inner state in useEffect in order to avoid situation when
   // Our component is not mounted yet, but `open` state is set to `true` (for example initially opened)
@@ -14,22 +14,23 @@ export const useOpenState = ({
       if (typeof open !== 'boolean') {
         throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
       }
-      setIsOpenState(open);
+      setOpenState(open);
     }
   }, [isControllingOpenProp, open]);
-  const setIsOpen = React.useCallback(newIsOpen => {
+  const setOpen = React.useCallback(action => {
+    const newOpen = typeof action === 'function' ? action(openState) : action;
     if (!isControllingOpenProp) {
-      setIsOpenState(newIsOpen);
+      setOpenState(newOpen);
     }
-    if (newIsOpen && onOpen) {
+    if (newOpen && onOpen) {
       onOpen();
     }
-    if (!newIsOpen && onClose) {
+    if (!newOpen && onClose) {
       onClose();
     }
-  }, [isControllingOpenProp, onOpen, onClose]);
+  }, [isControllingOpenProp, onOpen, onClose, openState]);
   return {
-    isOpen: openState,
-    setIsOpen
+    open: openState,
+    setOpen
   };
 };