@mui/x-date-pickers 7.0.0-beta.2 → 7.0.0-beta.4

package/PickersTextField/PickersInputBase/PickersInputBase.types.d.ts

@@ -20,6 +20,7 @@ export interface PickersInputPropsUsedByField extends Pick<PickersSectionListPro
     id?: string;
     fullWidth?: boolean;
     readOnly?: boolean;
+    name?: string;
     inputProps?: React.HTMLAttributes<HTMLInputElement> & {
         ref?: React.Ref<HTMLInputElement>;
     };

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
 import { styled, useThemeProps } from '@mui/material/styles';
+import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { pickersOutlinedInputClasses, getPickersOutlinedInputUtilityClass } from './pickersOutlinedInputClasses';
 import Outline from './Outline';
@@ -150,11 +151,10 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
   fullWidth: PropTypes.bool,
   id: PropTypes.string,
   inputProps: PropTypes.object,
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   label: PropTypes.node,
   margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  name: PropTypes.string,
   notched: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,

package/PickersTextField/PickersTextField.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const PickersTextField: React.ForwardRefExoticComponent<(Omit<import("./PickersTextField.types").PickersFilledTextFieldProps, "ref"> | Omit<import("./PickersTextField.types").PickersOutlinedTextFieldProps, "ref"> | Omit<import("./PickersTextField.types").PickersStandardTextFieldProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
+declare const PickersTextField: React.ForwardRefExoticComponent<(Omit<import("./PickersTextField.types").PickersStandardTextFieldProps, "ref"> | Omit<import("./PickersTextField.types").PickersOutlinedTextFieldProps, "ref"> | Omit<import("./PickersTextField.types").PickersFilledTextFieldProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
 export { PickersTextField };

package/PickersTextField/PickersTextField.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
+const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
+import { refType } from '@mui/utils';
 import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
@@ -74,6 +75,7 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       onChange,
       fullWidth,
       id: idProp,
+      name,
       // Props used by FormHelperText
       helperText,
       FormHelperTextProps,
@@ -134,7 +136,10 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       inputProps: inputProps,
       inputRef: inputRef,
       sectionListRef: sectionListRef,
-      label: label
+      label: label,
+      name: name,
+      role: "group",
+      "aria-labelledby": inputLabelId
     }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
       id: helperTextId
     }, FormHelperTextProps, {
@@ -207,15 +212,14 @@ process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
    * component depending on the `variant` prop value.
    */
   InputProps: PropTypes.object,
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   label: PropTypes.node,
   /**
    * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
    * @default 'none'
    */
   margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  name: PropTypes.string,
   onBlur: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,

package/StaticDatePicker/StaticDatePicker.js

@@ -105,7 +105,6 @@ StaticDatePicker.propTypes = {
   /**
    * The day view will show as many weeks as needed after the end of the current month to match this value.
    * Put it to 6 to have a fixed number of weeks in Gregorian calendars
-   * @default undefined
    */
   fixedWeekNumber: PropTypes.number,
   /**

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -130,7 +130,6 @@ StaticDateTimePicker.propTypes = {
   /**
    * The day view will show as many weeks as needed after the end of the current month to match this value.
    * Put it to 6 to have a fixed number of weeks in Gregorian calendars
-   * @default undefined
    */
   fixedWeekNumber: PropTypes.number,
   /**

package/TimeField/TimeField.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TimeFieldProps } from './TimeField.types';
 import { PickerValidDate } from '../models';
-type TimeFieldComponent = (<TDate extends PickerValidDate>(props: TimeFieldProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type TimeFieldComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: TimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/TimeField/TimeField.js

@@ -9,6 +9,7 @@ import { useSlotProps } from '@mui/base/utils';
 import { refType } from '@mui/utils';
 import { useTimeField } from './useTimeField';
 import { useClearableField } from '../hooks';
+import { PickersTextField } from '../PickersTextField';
 import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -35,7 +36,7 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, inRe
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
+  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField;
   const textFieldProps = useSlotProps({
     elementType: TextField,
     externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
@@ -110,6 +111,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  /**
+   * @default false
+   */
+  enableAccessibleFieldDOMStructure: PropTypes.bool,
   /**
    * If `true`, the component is displayed in focused state.
    */
@@ -243,17 +248,14 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   required: PropTypes.bool,
   /**
    * The currently selected sections.
-   * This prop accept four formats:
+   * This prop accepts four formats:
    * 1. If a number is provided, the section at this index will be selected.
-   * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
-   * 4. If `null` is provided, no section will be selected
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
-    endIndex: PropTypes.number.isRequired,
-    startIndex: PropTypes.number.isRequired
-  })]),
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number]),
   /**
    * Disable specific time.
    * @template TDate

package/TimeField/TimeField.types.d.ts

@@ -2,21 +2,19 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import TextField from '@mui/material/TextField';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
+import { MakeOptional } from '../internals/models/helpers';
 import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation';
-import { FieldsTextFieldProps } from '../internals/models/fields';
-import { FieldSection, PickerValidDate, TimeValidationError } from '../models';
-import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
-export interface UseTimeFieldProps<TDate extends PickerValidDate> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TimeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps {
+import { FieldSection, PickerValidDate, TimeValidationError, BuiltInFieldTextFieldProps } from '../models';
+import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
+export interface UseTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps, ExportedUseClearableFieldProps {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`
      */
     ampm?: boolean;
 }
-export type UseTimeFieldDefaultizedProps<TDate extends PickerValidDate> = DefaultizedProps<UseTimeFieldProps<TDate>, keyof BaseTimeValidationProps | 'format'>;
-export type UseTimeFieldComponentProps<TDate extends PickerValidDate, TChildProps extends {}> = Omit<TChildProps, keyof UseTimeFieldProps<TDate>> & UseTimeFieldProps<TDate>;
-export interface TimeFieldProps<TDate extends PickerValidDate> extends UseTimeFieldComponentProps<TDate, FieldsTextFieldProps> {
+export type UseTimeFieldComponentProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}> = Omit<TChildProps, keyof UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> & UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
+export type TimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = UseTimeFieldComponentProps<TDate, TEnableAccessibleFieldDOMStructure, BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**
      * Overridable component slots.
      * @default {}
@@ -26,17 +24,16 @@ export interface TimeFieldProps<TDate extends PickerValidDate> extends UseTimeFi
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: TimeFieldSlotProps<TDate>;
-}
-export type TimeFieldOwnerState<TDate extends PickerValidDate> = TimeFieldProps<TDate>;
+    slotProps?: TimeFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+};
+export type TimeFieldOwnerState<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = TimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
 export interface TimeFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
-     * Receives the same props as `@mui/material/TextField`.
-     * @default TextField from '@mui/material'
+     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
      */
     textField?: React.ElementType;
 }
-export interface TimeFieldSlotProps<TDate extends PickerValidDate> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, TimeFieldOwnerState<TDate>>;
+export interface TimeFieldSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
+    textField?: SlotComponentProps<typeof TextField, {}, TimeFieldOwnerState<TDate, TEnableAccessibleFieldDOMStructure>>;
 }

package/TimeField/index.d.ts

@@ -1,3 +1,3 @@
 export { TimeField } from './TimeField';
 export { useTimeField as unstable_useTimeField } from './useTimeField';
-export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, UseTimeFieldDefaultizedProps, } from './TimeField.types';
+export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, } from './TimeField.types';

package/TimeField/useTimeField.d.ts

@@ -1,3 +1,3 @@
-import { UseTimeFieldProps, UseTimeFieldComponentProps } from './TimeField.types';
+import { UseTimeFieldProps } from './TimeField.types';
 import { PickerValidDate } from '../models';
-export declare const useTimeField: <TDate extends PickerValidDate, TChildProps extends {}>(inProps: UseTimeFieldComponentProps<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<Omit<TChildProps & Omit<UseTimeFieldProps<TDate>, "format" | keyof import("../internals").BaseTimeValidationProps> & Required<Pick<UseTimeFieldProps<TDate>, "format" | keyof import("../internals").BaseTimeValidationProps>>, keyof UseTimeFieldProps<any>>>;
+export declare const useTimeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals/hooks/useField").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, keyof UseTimeFieldProps<any, TEnableAccessibleFieldDOMStructure>>>;

package/TimeField/useTimeField.js

@@ -1,20 +1,8 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateTime } from '../internals/utils/validation/validateTime';
-import { useUtils } from '../internals/hooks/useUtils';
 import { splitFieldInternalAndForwardedProps } from '../internals/utils/fields';
-const useDefaultizedTimeField = props => {
-  var _props$ampm, _props$disablePast, _props$disableFuture, _props$format;
-  const utils = useUtils();
-  const ampm = (_props$ampm = props.ampm) != null ? _props$ampm : utils.is12HourCycleInCurrentLocale();
-  const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h;
-  return _extends({}, props, {
-    disablePast: (_props$disablePast = props.disablePast) != null ? _props$disablePast : false,
-    disableFuture: (_props$disableFuture = props.disableFuture) != null ? _props$disableFuture : false,
-    format: (_props$format = props.format) != null ? _props$format : defaultFormat
-  });
-};
+import { useDefaultizedTimeField } from '../internals/hooks/defaultizedFieldProps';
 export const useTimeField = inProps => {
   const props = useDefaultizedTimeField(inProps);
   const {

package/TimePicker/TimePicker.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TimePickerProps } from './TimePicker.types';
 import { PickerValidDate } from '../models';
-type TimePickerComponent = (<TDate extends PickerValidDate>(props: TimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type TimePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: TimePickerProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/TimePicker/TimePicker.js

@@ -107,6 +107,10 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  /**
+   * @default false
+   */
+  enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
    * Format of the date when rendered in the input(s).
    * Defaults to localized format based on the used `views`.
@@ -223,17 +227,14 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   referenceDate: PropTypes.object,
   /**
    * The currently selected sections.
-   * This prop accept four formats:
+   * This prop accepts four formats:
    * 1. If a number is provided, the section at this index will be selected.
-   * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
-   * 4. If `null` is provided, no section will be selected
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
-    endIndex: PropTypes.number.isRequired,
-    startIndex: PropTypes.number.isRequired
-  })]),
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number]),
   /**
    * Disable specific time.
    * @template TDate

package/TimePicker/TimePicker.types.d.ts

@@ -4,9 +4,9 @@ import { MobileTimePickerProps, MobileTimePickerSlots, MobileTimePickerSlotProps
 import { PickerValidDate } from '../models';
 export interface TimePickerSlots<TDate extends PickerValidDate> extends DesktopTimePickerSlots<TDate>, MobileTimePickerSlots<TDate, TimeViewWithMeridiem> {
 }
-export interface TimePickerSlotProps<TDate extends PickerValidDate> extends DesktopTimePickerSlotProps<TDate>, MobileTimePickerSlotProps<TDate, TimeViewWithMeridiem> {
+export interface TimePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileTimePickerSlotProps<TDate, TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
 }
-export interface TimePickerProps<TDate extends PickerValidDate> extends DesktopTimePickerProps<TDate>, Omit<MobileTimePickerProps<TDate, TimeViewWithMeridiem>, 'views'> {
+export interface TimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DesktopTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>, Omit<MobileTimePickerProps<TDate, TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'
@@ -22,5 +22,5 @@ export interface TimePickerProps<TDate extends PickerValidDate> extends DesktopT
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: TimePickerSlotProps<TDate>;
+    slotProps?: TimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
 }

package/TimePicker/TimePickerToolbar.d.ts

@@ -3,14 +3,15 @@ import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/
 import { TimePickerToolbarClasses } from './timePickerToolbarClasses';
 import { TimeViewWithMeridiem } from '../internals/models';
 import { PickerValidDate } from '../models';
-export interface TimePickerToolbarProps<TDate extends PickerValidDate> extends BaseToolbarProps<TDate | null, TimeViewWithMeridiem> {
+export interface TimePickerToolbarProps<TDate extends PickerValidDate> extends BaseToolbarProps<TDate | null, TimeViewWithMeridiem>, ExportedTimePickerToolbarProps {
     ampm?: boolean;
     ampmInClock?: boolean;
-    classes?: Partial<TimePickerToolbarClasses>;
 }
 export interface ExportedTimePickerToolbarProps extends ExportedBaseToolbarProps {
-    ampm?: boolean;
-    ampmInClock?: boolean;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<TimePickerToolbarClasses>;
 }
 /**
  * Demos:

package/TimePicker/TimePickerToolbar.js

@@ -1,7 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -132,7 +133,8 @@ function TimePickerToolbar(inProps) {
       onViewChange,
       views,
       disabled,
-      readOnly
+      readOnly,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
@@ -160,7 +162,7 @@ function TimePickerToolbar(inProps) {
     toolbarTitle: localeText.timePickerToolbarTitle,
     isLandscape: isLandscape,
     ownerState: ownerState,
-    className: classes.root
+    className: clsx(classes.root, className)
   }, other, {
     children: [/*#__PURE__*/_jsxs(TimePickerToolbarHourMinuteLabel, {
       className: classes.hourMinuteLabel,
@@ -213,6 +215,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   // ----------------------------------------------------------------------
   ampm: PropTypes.bool,
   ampmInClock: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   disabled: PropTypes.bool,
@@ -230,6 +235,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * 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]),
   titleId: PropTypes.string,
   /**

package/hooks/index.d.ts

@@ -1,2 +1,2 @@
 export { useClearableField } from './useClearableField';
-export type { UseClearableFieldSlots, UseClearableFieldSlotProps } from './useClearableField';
+export type { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, UseClearableFieldResponse, } from './useClearableField';

package/hooks/useClearableField.d.ts

@@ -4,8 +4,15 @@ import MuiIconButton from '@mui/material/IconButton';
 import { SxProps } from '@mui/system';
 import { ClearIcon } from '../icons';
 export interface ExportedUseClearableFieldProps {
+    /**
+     * If `true`, a clear button will be shown in the field allowing value clearing.
+     * @default false
+     */
     clearable?: boolean;
-    onClear?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Callback fired when the clear button is clicked.
+     */
+    onClear?: React.MouseEventHandler;
 }
 export interface UseClearableFieldSlots {
     /**
@@ -31,5 +38,6 @@ interface UseClearableFieldProps extends ExportedUseClearableFieldProps {
     slots?: UseClearableFieldSlots;
     slotProps?: UseClearableFieldSlotProps;
 }
-export declare const useClearableField: <TFieldProps extends UseClearableFieldProps>(props: TFieldProps) => Omit<TFieldProps, "slotProps" | "slots" | "onClear" | "clearable">;
+export type UseClearableFieldResponse<TFieldProps extends UseClearableFieldProps> = Omit<TFieldProps, 'clearable' | 'onClear' | 'slots' | 'slotProps'>;
+export declare const useClearableField: <TFieldProps extends UseClearableFieldProps>(props: TFieldProps) => UseClearableFieldResponse<TFieldProps>;
 export {};

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-beta.2
+ * @mui/x-date-pickers v7.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.ts

@@ -14,6 +14,9 @@ export interface ExportedPickersArrowSwitcherProps {
      * @default {}
      */
     slotProps?: PickersArrowSwitcherSlotProps;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<PickersArrowSwitcherClasses>;
     /**
      * Format used to display the date.

package/internals/components/PickersPopper.d.ts

@@ -59,6 +59,9 @@ export interface PickerPopperProps extends UsePickerValueActions {
     onBlur?: () => void;
     slots?: PickersPopperSlots;
     slotProps?: PickersPopperSlotProps;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<PickersPopperClasses>;
     shouldRestoreFocus?: () => boolean;
     reduceAnimations?: boolean;

package/internals/components/PickersPopper.js

@@ -225,8 +225,7 @@ export function PickersPopper(inProps) {
   } = props;
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
-      // IE11, Edge (prior to using Blink?) use 'Esc'
-      if (open && (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc')) {
+      if (open && nativeEvent.key === 'Escape') {
         onDismiss();
       }
     }

package/internals/demo/DemoContainer.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import Stack, { stackClasses } from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { textFieldClasses } from '@mui/material/TextField';
+import { pickersTextFieldClasses } from '@mui/x-date-pickers/PickersTextField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getChildTypeFromChildName = childName => {
@@ -123,13 +124,13 @@ export function DemoContainer(props) {
   } else if (childrenTypes.has('single-input-range-field')) {
     if (!childrenSupportedSections.has('date-time')) {
       extraSx = {
-        [`& > .${textFieldClasses.root}`]: {
+        [`& > .${textFieldClasses.root}, & > .${pickersTextFieldClasses.root}`]: {
           minWidth: 300
         }
       };
     } else {
       extraSx = {
-        [`& > .${textFieldClasses.root}`]: {
+        [`& > .${textFieldClasses.root}, & > .${pickersTextFieldClasses.root}`]: {
           minWidth: {
             xs: 300,
             // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
@@ -140,21 +141,21 @@ export function DemoContainer(props) {
     }
   } else if (childrenSupportedSections.has('date-time')) {
     extraSx = {
-      [`& > .${textFieldClasses.root}`]: {
+      [`& > .${textFieldClasses.root}, & > .${pickersTextFieldClasses.root}`]: {
         minWidth: 270
       }
     };
     if (childrenTypes.has('multi-input-range-field')) {
       // increase width for the multi input date time range fields
       demoItemSx = {
-        [`& > .${stackClasses.root} > .${textFieldClasses.root}`]: {
+        [`& > .${stackClasses.root} > .${textFieldClasses.root}, & > .${stackClasses.root} > .${pickersTextFieldClasses.root}`]: {
           minWidth: 210
         }
       };
     }
   } else {
     extraSx = {
-      [`& > .${textFieldClasses.root}`]: {
+      [`& > .${textFieldClasses.root}, & > .${pickersTextFieldClasses.root}`]: {
         minWidth: 200
       }
     };

package/internals/hooks/defaultizedFieldProps.d.ts

@@ -0,0 +1,19 @@
+import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, TimeValidationProps } from '../models/validation';
+import { DefaultizedProps } from '../models/helpers';
+import { PickerValidDate } from '../../models';
+export interface UseDefaultizedDateFieldBaseProps<TDate extends PickerValidDate> extends BaseDateValidationProps<TDate> {
+    format?: string;
+}
+export declare const useDefaultizedDateField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedDateFieldBaseProps<TDate>, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & Omit<TKnownProps, keyof UseDefaultizedDateFieldBaseProps<any>> & Required<Pick<TKnownProps, keyof UseDefaultizedDateFieldBaseProps<any>>>;
+export interface UseDefaultizedTimeFieldBaseProps extends BaseTimeValidationProps {
+    format?: string;
+}
+export declare const useDefaultizedTimeField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedTimeFieldBaseProps & {
+    ampm?: boolean | undefined;
+}, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & Omit<TKnownProps, keyof UseDefaultizedTimeFieldBaseProps> & Required<Pick<TKnownProps, keyof UseDefaultizedTimeFieldBaseProps>>;
+export interface UseDefaultizedDateTimeFieldBaseProps<TDate extends PickerValidDate> extends BaseDateValidationProps<TDate>, BaseTimeValidationProps {
+    format?: string;
+}
+export declare const useDefaultizedDateTimeField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedDateTimeFieldBaseProps<TDate> & DateTimeValidationProps<TDate> & TimeValidationProps<TDate> & {
+    ampm?: boolean | undefined;
+}, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & Omit<TKnownProps, keyof UseDefaultizedDateTimeFieldBaseProps<any>> & Required<Pick<TKnownProps, keyof UseDefaultizedDateTimeFieldBaseProps<any>>>;

package/internals/hooks/defaultizedFieldProps.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { applyDefaultDate } from '../utils/date-utils';
+import { useUtils, useDefaultDates } from './useUtils';
+export const useDefaultizedDateField = props => {
+  var _props$disablePast, _props$disableFuture, _props$format;
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  return _extends({}, props, {
+    disablePast: (_props$disablePast = props.disablePast) != null ? _props$disablePast : false,
+    disableFuture: (_props$disableFuture = props.disableFuture) != null ? _props$disableFuture : false,
+    format: (_props$format = props.format) != null ? _props$format : utils.formats.keyboardDate,
+    minDate: applyDefaultDate(utils, props.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(utils, props.maxDate, defaultDates.maxDate)
+  });
+};
+export const useDefaultizedTimeField = props => {
+  var _props$ampm, _props$disablePast2, _props$disableFuture2, _props$format2;
+  const utils = useUtils();
+  const ampm = (_props$ampm = props.ampm) != null ? _props$ampm : utils.is12HourCycleInCurrentLocale();
+  const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h;
+  return _extends({}, props, {
+    disablePast: (_props$disablePast2 = props.disablePast) != null ? _props$disablePast2 : false,
+    disableFuture: (_props$disableFuture2 = props.disableFuture) != null ? _props$disableFuture2 : false,
+    format: (_props$format2 = props.format) != null ? _props$format2 : defaultFormat
+  });
+};
+export const useDefaultizedDateTimeField = props => {
+  var _props$ampm2, _props$disablePast3, _props$disableFuture3, _props$format3, _props$minDateTime, _props$maxDateTime, _props$minDateTime2, _props$maxDateTime2;
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  const ampm = (_props$ampm2 = props.ampm) != null ? _props$ampm2 : utils.is12HourCycleInCurrentLocale();
+  const defaultFormat = ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h;
+  return _extends({}, props, {
+    disablePast: (_props$disablePast3 = props.disablePast) != null ? _props$disablePast3 : false,
+    disableFuture: (_props$disableFuture3 = props.disableFuture) != null ? _props$disableFuture3 : false,
+    format: (_props$format3 = props.format) != null ? _props$format3 : defaultFormat,
+    disableIgnoringDatePartForTimeValidation: Boolean(props.minDateTime || props.maxDateTime),
+    minDate: applyDefaultDate(utils, (_props$minDateTime = props.minDateTime) != null ? _props$minDateTime : props.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(utils, (_props$maxDateTime = props.maxDateTime) != null ? _props$maxDateTime : props.maxDate, defaultDates.maxDate),
+    minTime: (_props$minDateTime2 = props.minDateTime) != null ? _props$minDateTime2 : props.minTime,
+    maxTime: (_props$maxDateTime2 = props.maxDateTime) != null ? _props$maxDateTime2 : props.maxTime
+  });
+};

package/internals/hooks/useDesktopPicker/useDesktopPicker.d.ts

@@ -8,6 +8,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
-export declare const useDesktopPicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TDate, TView, TExternalProps>) => {
+export declare const useDesktopPicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TDate, TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };