@mui/x-date-pickers 7.22.2 → 8.0.0-alpha.0

package/TimeField/TimeField.types.d.ts

@@ -1,20 +1,15 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
+import { MakeOptional } from '@mui/x-internals/types';
 import TextField from '@mui/material/TextField';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { MakeOptional } from '../internals/models/helpers';
-import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation';
 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;
+import { ExportedValidateTimeProps } from '../validation/validateTime';
+import { AmPmProps } from '../internals/models/props/time';
+export interface UseTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, ExportedValidateTimeProps, ExportedUseClearableFieldProps, AmPmProps {
 }
-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>> & {
+export type TimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseTimeFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**
      * Overridable component slots.
      * @default {}
@@ -24,9 +19,9 @@ export type TimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleField
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: TimeFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: TimeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
 };
-export type TimeFieldOwnerState<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = TimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
+export type TimeFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = TimeFieldProps<TEnableAccessibleFieldDOMStructure>;
 export interface TimeFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
@@ -34,6 +29,6 @@ export interface TimeFieldSlots extends UseClearableFieldSlots {
      */
     textField?: React.ElementType;
 }
-export interface TimeFieldSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, TimeFieldOwnerState<TDate, TEnableAccessibleFieldDOMStructure>>;
+export interface TimeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
+    textField?: SlotComponentProps<typeof TextField, {}, TimeFieldOwnerState<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, } from './TimeField.types';
+export type { UseTimeFieldProps, TimeFieldProps } from './TimeField.types';

package/TimeField/useTimeField.d.ts

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

package/TimePicker/TimePicker.d.ts

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

package/TimePicker/TimePicker.js

@@ -85,7 +85,8 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   desktopModeMediaQuery: PropTypes.string,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -110,7 +111,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   disablePast: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -218,6 +219,11 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
@@ -241,8 +247,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number]),
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */

package/TimePicker/TimePicker.types.d.ts

@@ -1,15 +1,13 @@
 import { DesktopTimePickerProps, DesktopTimePickerSlots, DesktopTimePickerSlotProps } from '../DesktopTimePicker';
-import { TimeViewWithMeridiem } from '../internals/models';
-import { DefaultizedProps } from '../internals/models/helpers';
-import { BaseTimeValidationProps } from '../internals/models/validation';
+import { BaseSingleInputFieldProps, TimeViewWithMeridiem } from '../internals/models';
 import { MobileTimePickerProps, MobileTimePickerSlots, MobileTimePickerSlotProps } from '../MobileTimePicker';
-import { BaseSingleInputFieldProps, FieldSection, PickerValidDate, TimeValidationError } from '../models';
-import { UseTimeFieldProps } from '../TimeField';
-export interface TimePickerSlots<TDate extends PickerValidDate> extends DesktopTimePickerSlots<TDate>, MobileTimePickerSlots<TDate, TimeViewWithMeridiem> {
+import { FieldSection, PickerValidDate, TimeValidationError } from '../models';
+import { ValidateTimeProps } from '../validation/validateTime';
+export interface TimePickerSlots extends DesktopTimePickerSlots, MobileTimePickerSlots<TimeViewWithMeridiem> {
 }
-export interface TimePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileTimePickerSlotProps<TDate, TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
+export interface TimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileTimePickerSlotProps<TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
 }
-export interface TimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DesktopTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>, Omit<MobileTimePickerProps<TDate, TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
+export interface TimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopTimePickerProps<TEnableAccessibleFieldDOMStructure>, Omit<MobileTimePickerProps<TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'
@@ -20,15 +18,14 @@ export interface TimePickerProps<TDate extends PickerValidDate, TEnableAccessibl
      * Overridable component slots.
      * @default {}
      */
-    slots?: TimePickerSlots<TDate>;
+    slots?: TimePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: TimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: TimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
 /**
- * Props the field can receive when used inside a time picker.
- * (`TimePicker`, `DesktopTimePicker` or `MobileTimePicker` component).
+ * Props the field can receive when used inside a time picker (<TimePicker />, <DesktopTimePicker /> or <MobileTimePicker /> component).
  */
-export type TimePickerFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = DefaultizedProps<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | 'ampm' | keyof BaseTimeValidationProps> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, TimeValidationError>;
+export type TimePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateTimeProps & BaseSingleInputFieldProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError>;

package/TimePicker/TimePickerToolbar.d.ts

@@ -3,7 +3,7 @@ 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>, ExportedTimePickerToolbarProps {
+export interface TimePickerToolbarProps extends BaseToolbarProps<PickerValidDate | null, TimeViewWithMeridiem>, ExportedTimePickerToolbarProps {
     ampm?: boolean;
     ampmInClock?: boolean;
 }
@@ -23,7 +23,7 @@ export interface ExportedTimePickerToolbarProps extends ExportedBaseToolbarProps
  *
  * - [TimePickerToolbar API](https://mui.com/x/api/date-pickers/time-picker-toolbar/)
  */
-declare function TimePickerToolbar<TDate extends PickerValidDate>(inProps: TimePickerToolbarProps<TDate>): React.JSX.Element;
+declare function TimePickerToolbar(inProps: TimePickerToolbarProps): React.JSX.Element;
 declare namespace TimePickerToolbar {
     var propTypes: any;
 }

package/TimePicker/TimePickerToolbar.js

@@ -13,7 +13,7 @@ import { PickersToolbarText } from "../internals/components/PickersToolbarText.j
 import { PickersToolbarButton } from "../internals/components/PickersToolbarButton.js";
 import { PickersToolbar } from "../internals/components/PickersToolbar.js";
 import { arrayIncludes } from "../internals/utils/utils.js";
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from "./timePickerToolbarClasses.js";
@@ -134,7 +134,7 @@ function TimePickerToolbar(inProps) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const isRtl = useRtl();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
@@ -216,6 +216,11 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
   disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
@@ -230,6 +235,11 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/TimePicker/shared.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DefaultizedProps } from '../internals/models/helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import { TimeClockSlots, TimeClockSlotProps } from '../TimeClock/TimeClock.types';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
 import { BaseTimeValidationProps } from '../internals/models/validation';
@@ -8,20 +8,20 @@ import { TimePickerToolbarProps, ExportedTimePickerToolbarProps } from './TimePi
 import { PickerValidDate, TimeValidationError } from '../models';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
 import { TimeViewRendererProps } from '../timeViewRenderers';
-import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
+import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/time';
 import { TimeViewWithMeridiem } from '../internals/models';
-export interface BaseTimePickerSlots<TDate extends PickerValidDate> extends TimeClockSlots {
+export interface BaseTimePickerSlots extends TimeClockSlots {
     /**
      * Custom component for the toolbar rendered above the views.
      * @default TimePickerToolbar
      */
-    toolbar?: React.JSXElementConstructor<TimePickerToolbarProps<TDate>>;
+    toolbar?: React.JSXElementConstructor<TimePickerToolbarProps>;
 }
 export interface BaseTimePickerSlotProps extends TimeClockSlotProps {
     toolbar?: ExportedTimePickerToolbarProps;
 }
-export type TimePickerViewRenderers<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<TDate | null, TView, TimeViewRendererProps<TView, BaseClockProps<TDate, TView>>, TAdditionalProps>;
-export interface BaseTimePickerProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem> extends BasePickerInputProps<TDate | null, TDate, TView, TimeValidationError>, ExportedBaseClockProps<TDate> {
+export type TimePickerViewRenderers<TView extends TimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerValidDate | null, TView, TimeViewRendererProps<TView, BaseClockProps<TView>>, TAdditionalProps>;
+export interface BaseTimePickerProps<TView extends TimeViewWithMeridiem> extends BasePickerInputProps<PickerValidDate | null, TView, TimeValidationError>, ExportedBaseClockProps {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
      * @default true on desktop, false on mobile
@@ -31,7 +31,7 @@ export interface BaseTimePickerProps<TDate extends PickerValidDate, TView extend
      * Overridable component slots.
      * @default {}
      */
-    slots?: BaseTimePickerSlots<TDate>;
+    slots?: BaseTimePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
@@ -42,8 +42,8 @@ export interface BaseTimePickerProps<TDate extends PickerValidDate, TView extend
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be used.
      */
-    viewRenderers?: Partial<TimePickerViewRenderers<TDate, TView>>;
+    viewRenderers?: Partial<TimePickerViewRenderers<TView>>;
 }
-type UseTimePickerDefaultizedProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>>;
-export declare function useTimePickerDefaultizedProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TDate, TView, Props>;
+type UseTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>>;
+export declare function useTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TView, Props>;
 export {};

package/YearCalendar/PickersYear.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "classes", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled, alpha, useThemeProps } from '@mui/material/styles';
@@ -8,16 +8,12 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getPickersYearUtilityClass, pickersYearClasses } from "./pickersYearClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    disabled,
-    selected,
-    classes
-  } = ownerState;
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
     root: ['root'],
-    yearButton: ['yearButton', disabled && 'disabled', selected && 'selected']
+    yearButton: ['yearButton', ownerState.isYearDisabled && 'disabled', ownerState.isYearSelected && 'selected']
   };
   return composeClasses(slots, getPickersYearUtilityClass, classes);
 };
@@ -93,9 +89,10 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
   const {
       autoFocus,
       className,
+      classes: classesProp,
       children,
-      disabled,
-      selected,
+      disabled = false,
+      selected = false,
       value,
       tabIndex,
       onClick,
@@ -111,7 +108,14 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ref = React.useRef(null);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    isYearDisabled: disabled,
+    isYearSelected: selected
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
 
   // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
   useEnhancedEffect(() => {
@@ -138,12 +142,12 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
       onFocus: event => onFocus(event, value),
       onBlur: event => onBlur(event, value)
     },
-    ownerState: props,
+    ownerState,
     className: classes.yearButton
   });
   return /*#__PURE__*/_jsx(PickersYearRoot, _extends({
     className: clsx(classes.root, className),
-    ownerState: props
+    ownerState: ownerState
   }, other, {
     children: /*#__PURE__*/_jsx(YearButton, _extends({}, yearButtonProps))
   }));

package/YearCalendar/YearCalendar.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { YearCalendarProps } from './YearCalendar.types';
-import { PickerValidDate } from '../models';
-type YearCalendarComponent = (<TDate extends PickerValidDate>(props: YearCalendarProps<TDate>) => React.JSX.Element) & {
+type YearCalendarComponent = ((props: YearCalendarProps) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/YearCalendar/YearCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -17,11 +17,9 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
 import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
 import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from "../internals/constants/dimensions.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -74,6 +72,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
   const {
       autoFocus,
       className,
+      classes: classesProp,
       value: valueProp,
       defaultValue,
       referenceDate: referenceDateProp,
@@ -105,12 +104,15 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
-    onChange: onChange,
+    onChange,
     valueManager: singleItemValueManager
   });
   const now = useNow(timezone);
   const isRtl = useRtl();
   const utils = useUtils();
+  const {
+    ownerState
+  } = usePickerPrivateContext();
   const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
     value,
     utils,
@@ -120,8 +122,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     granularity: SECTION_TYPE_GRANULARITY.year
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);
   const selectedYear = React.useMemo(() => {
     if (value != null) {
@@ -284,7 +285,9 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    */
   defaultValue: PropTypes.object,
   /**
-   * If `true` picker is disabled
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
    */
   disabled: PropTypes.bool,
   /**
@@ -316,14 +319,15 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
   minDate: PropTypes.object,
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {TDate} value The new value.
+   * @param {PickerValidDate} value The new value.
    */
   onChange: PropTypes.func,
   onFocusedViewChange: PropTypes.func,
   onYearFocus: PropTypes.func,
   /**
-   * If `true` picker is readonly
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
    */
   readOnly: PropTypes.bool,
   /**
@@ -333,8 +337,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
   referenceDate: PropTypes.object,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,

package/YearCalendar/YearCalendar.types.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { YearCalendarClasses } from './yearCalendarClasses';
 import { BaseDateValidationProps, YearValidationProps } from '../internals/models/validation';
-import { PickerValidDate, TimezoneProps } from '../models';
-import type { PickersYearProps } from './PickersYear';
-import { SlotComponentPropsFromProps } from '../internals/models/helpers';
+import { PickerOwnerState, PickerValidDate, TimezoneProps } from '../models';
+import { FormProps } from '../internals/models/formProps';
+export interface PickerYearOwnerState extends PickerOwnerState {
+    isYearSelected: boolean;
+    isYearDisabled: boolean;
+}
 export interface YearCalendarSlots {
     /**
      * Button displayed to render a single year in the `year` view.
@@ -16,7 +20,7 @@ export interface YearCalendarSlots {
 export interface YearCalendarSlotProps {
     yearButton?: SlotComponentPropsFromProps<React.HTMLAttributes<HTMLButtonElement> & {
         sx: SxProps;
-    }, {}, PickersYearProps>;
+    }, {}, PickerYearOwnerState>;
 }
 export interface ExportedYearCalendarProps {
     /**
@@ -31,7 +35,7 @@ export interface ExportedYearCalendarProps {
      */
     yearsPerRow?: 3 | 4;
 }
-export interface YearCalendarProps<TDate extends PickerValidDate> extends ExportedYearCalendarProps, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimezoneProps {
+export interface YearCalendarProps extends ExportedYearCalendarProps, YearValidationProps, BaseDateValidationProps, TimezoneProps, FormProps {
     autoFocus?: boolean;
     className?: string;
     /**
@@ -52,31 +56,26 @@ export interface YearCalendarProps<TDate extends PickerValidDate> extends Export
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
-    /** If `true` picker is disabled */
-    disabled?: boolean;
     /**
      * The selected value.
      * Used when the component is controlled.
      */
-    value?: TDate | null;
+    value?: PickerValidDate | null;
     /**
      * The default selected value.
      * Used when the component is not controlled.
      */
-    defaultValue?: TDate | null;
+    defaultValue?: PickerValidDate | null;
     /**
      * The date used to generate the new value when both `value` and `defaultValue` are empty.
      * @default The closest valid year using the validation props, except callbacks such as `shouldDisableYear`.
      */
-    referenceDate?: TDate;
+    referenceDate?: PickerValidDate;
     /**
      * Callback fired when the value changes.
-     * @template TDate
-     * @param {TDate} value The new value.
+     * @param {PickerValidDate} value The new value.
      */
-    onChange?: (value: TDate) => void;
-    /** If `true` picker is readonly */
-    readOnly?: boolean;
+    onChange?: (value: PickerValidDate) => void;
     /**
      * If `true`, today's date is rendering without highlighting with circle.
      * @default false

package/dateViewRenderers/dateViewRenderers.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { DateCalendarProps } from '../DateCalendar';
-import { DateView, PickerValidDate } from '../models';
+import { DateView } from '../models';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-export interface DateViewRendererProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends Omit<DateCalendarProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView'> {
+export interface DateViewRendererProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<DateCalendarProps, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView'> {
     view: TView;
     onViewChange?: (view: TView) => void;
     views: readonly TView[];
     focusedView: TView | null;
 }
-export declare const renderDateViewCalendar: <TDate extends PickerValidDate>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsOrder, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
+export declare const renderDateViewCalendar: ({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsOrder, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<DateView>) => React.JSX.Element;

package/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export { useClearableField } from './useClearableField';
 export type { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, UseClearableFieldResponse, } from './useClearableField';
-export { usePickersTranslations } from './usePickersTranslations';
+export { usePickerTranslations } from './usePickerTranslations';
 export { useSplitFieldProps } from './useSplitFieldProps';
 export { useParsedFormat } from './useParsedFormat';
-export { usePickersContext } from './usePickersContext';
+export { usePickerContext } from './usePickerContext';

package/hooks/index.js

@@ -1,5 +1,5 @@
 export { useClearableField } from "./useClearableField.js";
-export { usePickersTranslations } from "./usePickersTranslations.js";
+export { usePickerTranslations } from "./usePickerTranslations.js";
 export { useSplitFieldProps } from "./useSplitFieldProps.js";
 export { useParsedFormat } from "./useParsedFormat.js";
-export { usePickersContext } from "./usePickersContext.js";
+export { usePickerContext } from "./usePickerContext.js";

package/hooks/useClearableField.js

@@ -9,10 +9,10 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import MuiIconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import { ClearIcon } from "../icons/index.js";
-import { usePickersTranslations } from "./usePickersTranslations.js";
+import { usePickerTranslations } from "./usePickerTranslations.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useClearableField = props => {
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const {
       clearable,
       onClear,
@@ -30,7 +30,8 @@ export const useClearableField = props => {
       ownerState: {},
       className: 'clearButton',
       additionalProps: {
-        title: translations.fieldClearLabel
+        title: translations.fieldClearLabel,
+        tabIndex: -1
       }
     }),
     iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);

package/hooks/useParsedFormat.d.ts

@@ -1,6 +1,5 @@
-import { PickerValidDate } from '../models';
 import type { UseFieldInternalProps } from '../internals/hooks/useField';
-interface UseParsedFormatParameters extends Pick<UseFieldInternalProps<any, any, any, any, any>, 'format' | 'formatDensity' | 'shouldRespectLeadingZeros'> {
+interface UseParsedFormatParameters extends Pick<UseFieldInternalProps<any, any, any, any>, 'format' | 'formatDensity' | 'shouldRespectLeadingZeros'> {
 }
 /**
  * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
@@ -11,5 +10,5 @@ interface UseParsedFormatParameters extends Pick<UseFieldInternalProps<any, any,
  * @param {boolean} params.shouldRespectLeadingZeros If `true`, the format will respect the leading zeroes, if `false`, the format will always add leading zeroes.
  * @returns
  */
-export declare const useParsedFormat: <TDate extends PickerValidDate>(parameters: UseParsedFormatParameters) => string;
+export declare const useParsedFormat: (parameters: UseParsedFormatParameters) => string;
 export {};

package/hooks/useParsedFormat.js

@@ -5,7 +5,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { buildSectionsFromFormat } from "../internals/hooks/useField/buildSectionsFromFormat.js";
 import { getLocalizedDigits } from "../internals/hooks/useField/useField.utils.js";
-import { usePickersTranslations } from "./usePickersTranslations.js";
+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.
@@ -23,7 +23,7 @@ export const useParsedFormat = parameters => {
   } = parameters;
   const utils = useUtils();
   const isRtl = useRtl();
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
   return React.useMemo(() => {
     const sections = buildSectionsFromFormat({

package/hooks/usePickerContext.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+export declare const usePickerContext: () => import("../internals/components/PickerProvider").PickerContextValue;