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

package/PickersTextField/PickersInput/PickersInput.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 { pickersInputClasses, getPickersInputUtilityClass } from './pickersInputClasses';
 import { PickersInputBase } from '../PickersInputBase';
@@ -157,11 +158,10 @@ process.env.NODE_ENV !== "production" ? PickersInput.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,
   onChange: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,

package/PickersTextField/PickersInputBase/PickersInputBase.d.ts

@@ -4,7 +4,7 @@ import { PickersInputBaseProps } from './PickersInputBase.types';
 export declare const PickersInputBaseRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     ownerState: OwnerStateType;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const PickersInputBaseSectionsContainer: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+export declare const PickersInputBaseSectionsContainer: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     ownerState: OwnerStateType;
 }, {}, {}>;
 interface OwnerStateType extends FormControlState, Omit<PickersInputBaseProps, keyof FormControlState> {

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -1,11 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "inputProps", "inputRef", "sectionListRef"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useForkRef from '@mui/utils/useForkRef';
+import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '@mui/utils/capitalize';
 import visuallyHidden from '@mui/utils/visuallyHidden';
@@ -157,6 +158,8 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       onInput,
       onPaste,
       onKeyDown,
+      name,
+      readOnly,
       inputProps,
       inputRef,
       sectionListRef
@@ -234,12 +237,16 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
         })
       }
     }), endAdornment, renderSuffix ? renderSuffix(_extends({}, muiFormControl)) : null, /*#__PURE__*/_jsx(PickersInputBaseInput, _extends({
+      name: name,
       className: classes.input,
       value: value,
       onChange: onChange,
       id: id,
       "aria-hidden": "true",
-      tabIndex: -1
+      tabIndex: -1,
+      readOnly: readOnly,
+      required: muiFormControl.required,
+      disabled: muiFormControl.disabled
     }, inputProps, {
       ref: handleInputRef
     }))]
@@ -281,11 +288,10 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.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,
   onChange: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,

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,
   /**
@@ -246,6 +254,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * Currently visible picker view.
    */
   view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired,
+  /**
+   * Available views.
+   */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired).isRequired
 } : void 0;
 export { TimePickerToolbar };

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.5
  *
  * @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/components/PickersToolbar.js

@@ -1,4 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["children", "className", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
@@ -63,21 +65,23 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
     name: 'MuiPickersToolbar'
   });
   const {
-    children,
-    className,
-    toolbarTitle,
-    hidden,
-    titleId
-  } = props;
+      children,
+      className,
+      toolbarTitle,
+      hidden,
+      titleId
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   if (hidden) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(PickersToolbarRoot, {
+  return /*#__PURE__*/_jsxs(PickersToolbarRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
-    ownerState: ownerState,
+    ownerState: ownerState
+  }, other, {
     children: [/*#__PURE__*/_jsx(Typography, {
       color: "text.secondary",
       variant: "overline",
@@ -88,5 +92,5 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
       ownerState: ownerState,
       children: children
     })]
-  });
+  }));
 });