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

package/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts

@@ -3,11 +3,10 @@ import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '../.
 import { BasePickerProps } from '../../models/props/basePickerProps';
 import { UsePickerParams } from '../usePicker';
 import { UsePickerViewsProps } from '../usePicker/usePickerViews';
-import { FieldSection, PickerValidDate } from '../../../models';
-import { DateOrTimeViewWithMeridiem } from '../../models';
-export interface UseStaticPickerSlots<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<PickerValidDate | null, TView> {
+import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
+export interface UseStaticPickerSlots<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<PickerValue, TView> {
 }
-export interface UseStaticPickerSlotProps<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<PickerValidDate | null, TView> {
+export interface UseStaticPickerSlotProps<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<PickerValue, TView> {
 }
 export interface StaticOnlyPickerProps {
     /**
@@ -27,7 +26,7 @@ export interface StaticOnlyPickerProps {
      */
     onClose?: () => void;
 }
-export interface UseStaticPickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<PickerValidDate | null, TView, any, any>> extends BasePickerProps<PickerValidDate | null, TView, TError, TExternalProps, {}>, StaticOnlyPickerProps {
+export interface UseStaticPickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<PickerValue, TView, any, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps, {}>, StaticOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
@@ -39,7 +38,7 @@ export interface UseStaticPickerProps<TView extends DateOrTimeViewWithMeridiem,
      */
     slotProps?: UseStaticPickerSlotProps<TView>;
 }
-export interface UseStaticPickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerValidDate | null, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
+export interface UseStaticPickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
     /**
      * Ref to pass to the root element

package/internals/hooks/useValueWithTimezone.d.ts

@@ -1,11 +1,12 @@
 import type { PickerValueManager } from './usePicker';
 import { PickersTimezone, PickerValidDate } from '../../models';
+import { PickerValidValue } from '../models';
 /**
  * Hooks making sure that:
  * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
  * - The value rendered is always the one from `props.timezone` if defined
  */
-export declare const useValueWithTimezone: <TValue, TChange extends (...params: any[]) => void>({ timezone: timezoneProp, value: valueProp, defaultValue, referenceDate, onChange, valueManager, }: UseValueWithTimezoneParameters<TValue, TChange>) => {
+export declare const useValueWithTimezone: <TValue extends PickerValidValue, TChange extends (...params: any[]) => void>({ timezone: timezoneProp, value: valueProp, defaultValue, referenceDate, onChange, valueManager, }: UseValueWithTimezoneParameters<TValue, TChange>) => {
     value: TValue;
     handleValueChange: TChange;
     timezone: string;
@@ -13,12 +14,12 @@ export declare const useValueWithTimezone: <TValue, TChange extends (...params:
 /**
  * Wrapper around `useControlled` and `useValueWithTimezone`
  */
-export declare const useControlledValueWithTimezone: <TValue, TChange extends (...params: any[]) => void>({ name, timezone: timezoneProp, value: valueProp, defaultValue, referenceDate, onChange: onChangeProp, valueManager, }: UseControlledValueWithTimezoneParameters<TValue, TChange>) => {
+export declare const useControlledValueWithTimezone: <TValue extends PickerValidValue, TChange extends (...params: any[]) => void>({ name, timezone: timezoneProp, value: valueProp, defaultValue, referenceDate, onChange: onChangeProp, valueManager, }: UseControlledValueWithTimezoneParameters<TValue, TChange>) => {
     value: TValue;
     handleValueChange: TChange;
     timezone: string;
 };
-interface UseValueWithTimezoneParameters<TValue, TChange extends (...params: any[]) => void> {
+interface UseValueWithTimezoneParameters<TValue extends PickerValidValue, TChange extends (...params: any[]) => void> {
     timezone: PickersTimezone | undefined;
     value: TValue | undefined;
     defaultValue: TValue | undefined;
@@ -31,7 +32,7 @@ interface UseValueWithTimezoneParameters<TValue, TChange extends (...params: any
     onChange: TChange | undefined;
     valueManager: PickerValueManager<TValue, any>;
 }
-interface UseControlledValueWithTimezoneParameters<TValue, TChange extends (...params: any[]) => void> extends UseValueWithTimezoneParameters<TValue, TChange> {
+interface UseControlledValueWithTimezoneParameters<TValue extends PickerValidValue, TChange extends (...params: any[]) => void> extends UseValueWithTimezoneParameters<TValue, TChange> {
     name: string;
 }
 export {};

package/internals/hooks/useViews.d.ts

@@ -1,9 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import type { PickerSelectionState } from './usePicker';
-import { DateOrTimeViewWithMeridiem } from '../models';
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../models';
 import { PickerValidDate } from '../../models';
 export type PickerOnChangeFn = (date: PickerValidDate | null, selectionState?: PickerSelectionState) => void;
-export interface UseViewsOptions<TValue, TView extends DateOrTimeViewWithMeridiem> {
+export interface UseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Callback fired when the value changes.
      * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
@@ -54,9 +54,9 @@ export interface UseViewsOptions<TValue, TView extends DateOrTimeViewWithMeridie
      */
     onFocusedViewChange?: (view: TView, hasFocus: boolean) => void;
 }
-export interface ExportedUseViewsOptions<TValue, TView extends DateOrTimeViewWithMeridiem> extends MakeOptional<UseViewsOptions<TValue, TView>, 'onChange' | 'openTo' | 'views'> {
+export interface ExportedUseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends MakeOptional<UseViewsOptions<TValue, TView>, 'onChange' | 'openTo' | 'views'> {
 }
-interface UseViewsResponse<TValue, TView extends DateOrTimeViewWithMeridiem> {
+interface UseViewsResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
     view: TView;
     setView: (view: TView) => void;
     focusedView: TView | null;
@@ -67,5 +67,5 @@ interface UseViewsResponse<TValue, TView extends DateOrTimeViewWithMeridiem> {
     goToNextView: () => void;
     setValueAndGoToNextView: (value: TValue, currentViewSelectionState?: PickerSelectionState, selectedView?: TView) => void;
 }
-export declare function useViews<TValue, TView extends DateOrTimeViewWithMeridiem>({ onChange, onViewChange, openTo, view: inView, views, autoFocus, focusedView: inFocusedView, onFocusedViewChange, }: UseViewsOptions<TValue, TView>): UseViewsResponse<TValue, TView>;
+export declare function useViews<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>({ onChange, onViewChange, openTo, view: inView, views, autoFocus, focusedView: inFocusedView, onFocusedViewChange, }: UseViewsOptions<TValue, TView>): UseViewsResponse<TValue, TView>;
 export {};

package/internals/index.d.ts

@@ -26,6 +26,7 @@ export { useControlledValueWithTimezone } from './hooks/useValueWithTimezone';
 export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker';
 export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, } from './hooks/useField';
 export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
+export { useFieldOwnerState } from './hooks/useFieldOwnerState';
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { usePicker } from './hooks/usePicker';
 export type { UsePickerResponse, UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, PickerViewsRendererProps, } from './hooks/usePicker';
@@ -38,7 +39,8 @@ export { useLocalizationContext, useDefaultDates, useUtils, useNow } from './hoo
 export type { ExportedUseViewsOptions, UseViewsOptions } from './hooks/useViews';
 export { useViews } from './hooks/useViews';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
-export type { BaseSingleInputFieldProps } from './models/fields';
+export type { RangePosition } from './models/pickers';
+export type { BaseSingleInputFieldProps, FieldRangeSection } from './models/fields';
 export type { BasePickerProps, BasePickerInputProps, BaseNonStaticPickerProps, } from './models/props/basePickerProps';
 export type { BaseClockProps, DesktopOnlyTimePickerProps, AmPmProps } from './models/props/time';
 export type { BaseTabsProps, ExportedBaseTabsProps } from './models/props/tabs';
@@ -46,7 +48,7 @@ export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/
 export type { FormProps } from './models/formProps';
 export type { PickerVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem, } from './models/common';
 export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, DateTimeValidationProps, } from './models/validation';
-export type { PickerRangeValue } from './models/value';
+export type { PickerValue, PickerRangeValue, PickerNonNullableRangeValue, InferNonNullablePickerValue, PickerValidValue, } from './models/value';
 export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem, } from './utils/date-utils';
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from './utils/date-time-utils';

package/internals/index.js

@@ -12,6 +12,7 @@ export { PickersToolbarButton } from "./components/PickersToolbarButton.js";
 export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from "./constants/dimensions.js";
 export { useControlledValueWithTimezone } from "./hooks/useValueWithTimezone.js";
 export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.js";
+export { useFieldOwnerState } from "./hooks/useFieldOwnerState.js";
 export { usePicker } from "./hooks/usePicker/index.js";
 export { usePickerPrivateContext } from "./hooks/usePickerPrivateContext.js";
 export { useStaticPicker } from "./hooks/useStaticPicker/index.js";

package/internals/models/fields.d.ts

@@ -3,6 +3,11 @@ import { MakeRequired } from '@mui/x-internals/types';
 import type { ExportedUseClearableFieldProps, UseClearableFieldSlotProps, UseClearableFieldSlots } from '../../hooks/useClearableField';
 import type { FieldSection, PickerOwnerState } from '../../models';
 import type { UseFieldInternalProps } from '../hooks/useField';
+import { RangePosition } from './pickers';
+import { PickerValidValue } from './value';
+export interface FieldRangeSection extends FieldSection {
+    dateName: RangePosition;
+}
 export interface BaseForwardedSingleInputFieldProps extends ExportedUseClearableFieldProps {
     className: string | undefined;
     sx: SxProps<any> | undefined;
@@ -32,4 +37,4 @@ export interface BaseForwardedSingleInputFieldProps extends ExportedUseClearable
  * Props the single input field can receive when used inside a picker.
  * Only contains what the MUI components are passing to the field, not what users can pass using the `props.slotProps.field`.
  */
-export type BaseSingleInputFieldProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> = MakeRequired<Pick<UseFieldInternalProps<TValue, TSection, TEnableAccessibleFieldDOMStructure, TError>, 'readOnly' | 'disabled' | 'format' | 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange' | 'timezone' | 'value' | 'onChange' | 'unstableFieldRef' | 'autoFocus'>, 'format' | 'value' | 'onChange' | 'timezone'> & BaseForwardedSingleInputFieldProps;
+export type BaseSingleInputFieldProps<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError> = MakeRequired<Pick<UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, TError>, 'readOnly' | 'disabled' | 'format' | 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange' | 'timezone' | 'value' | 'onChange' | 'unstableFieldRef' | 'autoFocus'>, 'format' | 'value' | 'onChange' | 'timezone'> & BaseForwardedSingleInputFieldProps;

package/internals/models/pickers.d.ts

@@ -0,0 +1 @@
+export type RangePosition = 'start' | 'end';

package/internals/models/pickers.js

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

package/internals/models/props/basePickerProps.d.ts

@@ -7,10 +7,11 @@ import { PickersInputComponentLocaleText } from '../../../locales/utils/pickersL
 import type { UsePickerViewsProps } from '../../hooks/usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem } from '../common';
 import { UseFieldInternalProps } from '../../hooks/useField';
+import { PickerValidValue } from '../value';
 /**
  * Props common to all pickers after applying the default props on each picker.
  */
-export interface BasePickerProps<TValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerBaseProps<TValue, TView, TError, TExternalProps, TAdditionalProps> {
+export interface BasePickerProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerBaseProps<TValue, TView, TError, TExternalProps, TAdditionalProps> {
     className?: string;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -25,13 +26,13 @@ export interface BasePickerProps<TValue, TView extends DateOrTimeViewWithMeridie
 /**
  * Props common to all pickers before applying the default props on each picker.
  */
-export interface BasePickerInputProps<TValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Omit<MakeOptional<BasePickerProps<TValue, TView, TError, any, any>, 'openTo' | 'views'>, 'viewRenderers'> {
+export interface BasePickerInputProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Omit<MakeOptional<BasePickerProps<TValue, TView, TError, any, any>, 'openTo' | 'views'>, 'viewRenderers'> {
 }
 /**
  * Props common to all non-static pickers.
  * These props are handled by the headless wrappers.
  */
-export interface BaseNonStaticPickerProps extends Pick<UseFieldInternalProps<any, any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
+export interface BaseNonStaticPickerProps extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
     /**
      * Format of the date when rendered in the input(s).
      * Defaults to localized format based on the used `views`.

package/internals/models/props/time.d.ts

@@ -6,6 +6,7 @@ import type { ExportedUseViewsOptions } from '../../hooks/useViews';
 import { TimeViewWithMeridiem } from '../common';
 import { ExportedValidateTimeProps } from '../../../validation/validateTime';
 import { FormProps } from '../formProps';
+import { PickerValue } from '../value';
 export interface AmPmProps {
     /**
      * 12h/24h view for hour selection clock.
@@ -15,7 +16,7 @@ export interface AmPmProps {
 }
 export interface ExportedBaseClockProps extends ExportedValidateTimeProps, TimezoneProps, AmPmProps {
 }
-export interface BaseClockProps<TView extends TimeViewWithMeridiem> extends ExportedUseViewsOptions<PickerValidDate | null, TView>, ExportedBaseClockProps, FormProps {
+export interface BaseClockProps<TView extends TimeViewWithMeridiem> extends ExportedUseViewsOptions<PickerValue, TView>, ExportedBaseClockProps, FormProps {
     className?: string;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.

package/internals/models/props/toolbar.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { DateOrTimeViewWithMeridiem } from '../common';
-export interface BaseToolbarProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedBaseToolbarProps {
+import { PickerValidValue } from '../value';
+export interface BaseToolbarProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedBaseToolbarProps {
     isLandscape: boolean;
     onChange: (newValue: TValue) => void;
     value: TValue;

package/internals/models/value.d.ts

@@ -1,3 +1,12 @@
 import { PickerValidDate } from '../../models/pickers';
+/**
+ * The type that the `value` and `defaultValue` props can receive on non-range components (date, time and date-time).
+ */
 export type PickerValue = PickerValidDate | null;
+/**
+ * The type that the `value` and `defaultValue` props can receive on range components (date-range, time-range and date-time-range).
+ */
 export type PickerRangeValue = [PickerValidDate | null, PickerValidDate | null];
+export type PickerNonNullableRangeValue = [PickerValidDate, PickerValidDate];
+export type PickerValidValue = PickerValue | PickerRangeValue;
+export type InferNonNullablePickerValue<TValue extends PickerValidValue> = TValue extends PickerRangeValue ? TValue extends PickerValue ? PickerValidDate | PickerNonNullableRangeValue : PickerNonNullableRangeValue : PickerValidDate;

package/internals/utils/date-utils.d.ts

@@ -14,7 +14,7 @@ interface FindClosestDateParams {
 export declare const findClosestEnabledDate: ({ date, disableFuture, disablePast, maxDate, minDate, isDateDisabled, utils, timezone, }: FindClosestDateParams) => PickerValidDate | null;
 export declare const replaceInvalidDateByNull: (utils: MuiPickersAdapter, value: PickerValidDate | null) => PickerValidDate | null;
 export declare const applyDefaultDate: (utils: MuiPickersAdapter, value: PickerValidDate | null | undefined, defaultValue: PickerValidDate) => PickerValidDate;
-export declare const areDatesEqual: (utils: MuiPickersAdapter, a: PickerValidDate, b: PickerValidDate) => boolean;
+export declare const areDatesEqual: (utils: MuiPickersAdapter, a: PickerValidDate | null, b: PickerValidDate | null) => boolean;
 export declare const getMonthsInYear: (utils: MuiPickersAdapter, year: PickerValidDate) => PickerValidDate[];
 export declare const getTodayDate: (utils: MuiPickersAdapter, timezone: PickersTimezone, valueType?: PickerValueType) => PickerValidDate;
 export declare const formatMeridiem: (utils: MuiPickersAdapter, meridiem: "am" | "pm") => string;

package/internals/utils/valueManagers.d.ts

@@ -1,6 +1,7 @@
 import type { PickerValueManager } from '../hooks/usePicker';
-import { DateValidationError, TimeValidationError, DateTimeValidationError, FieldSection } from '../../models';
+import { DateValidationError, TimeValidationError, DateTimeValidationError } from '../../models';
 import type { FieldValueManager } from '../hooks/useField';
-export type SingleItemPickerValueManager<TValue = any, TError extends DateValidationError | TimeValidationError | DateTimeValidationError = any> = PickerValueManager<TValue, TError>;
+import { PickerValue } from '../models';
+export type SingleItemPickerValueManager<TError extends DateValidationError | TimeValidationError | DateTimeValidationError = any> = PickerValueManager<PickerValue, TError>;
 export declare const singleItemValueManager: SingleItemPickerValueManager;
-export declare const singleItemFieldValueManager: FieldValueManager<any, FieldSection>;
+export declare const singleItemFieldValueManager: FieldValueManager<PickerValue>;

package/locales/nlNL.js

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

package/models/adapters.d.ts

@@ -215,7 +215,7 @@ export interface MuiPickersAdapter<TLocale = any> {
      */
     is12HourCycleInCurrentLocale(): boolean;
     /**
-     * Create a format with no meta-token (e.g: `LLL` or `PP`).
+     * Create a format with no meta-token (for example: `LLL` or `PP`).
      * @param {string} format The format to expand.
      * @returns {string} The expanded format.
      */
@@ -248,7 +248,7 @@ export interface MuiPickersAdapter<TLocale = any> {
      */
     formatNumber(numberToFormat: string): string;
     /**
-     * Check if the two dates are equal (e.g: they represent the same timestamp).
+     * Check if the two dates are equal (which means they represent the same timestamp).
      * @param {PickerValidDate | null} value The reference date.
      * @param {PickerValidDate | null} comparing The date to compare with the reference date.
      * @returns {boolean} `true` if the two dates are equal.
@@ -442,7 +442,7 @@ export interface MuiPickersAdapter<TLocale = any> {
      */
     getMonth(value: PickerValidDate): number;
     /**
-     * Get the date (e.g: the day in the month) of the given date.
+     * Get the date (day in the month) of the given date.
      * @param {PickerValidDate} value The given date.
      * @returns {number} The date of the given date.
      */
@@ -486,7 +486,7 @@ export interface MuiPickersAdapter<TLocale = any> {
      */
     setMonth(value: PickerValidDate, month: number): PickerValidDate;
     /**
-     * Set the date (e.g: the day in the month) to the given date.
+     * Set the date (day in the month) to the given date.
      * @param {PickerValidDate} value The date to be changed.
      * @param {number} date The date of the new date.
      * @returns {PickerValidDate} The new date with the date set.

package/models/fields.d.ts

@@ -4,7 +4,8 @@ import type { ExportedUseClearableFieldProps, UseClearableFieldResponse } from '
 import { ExportedPickersSectionListProps } from '../PickersSectionList';
 import type { UseFieldInternalProps, UseFieldResponse } from '../internals/hooks/useField';
 import type { PickersTextFieldProps } from '../PickersTextField';
-import { BaseForwardedSingleInputFieldProps } from '../internals/models';
+import { BaseForwardedSingleInputFieldProps, FieldRangeSection, PickerRangeValue, PickerValidValue } from '../internals/models';
+import { PickerOwnerState } from './pickers';
 export type FieldSectionType = 'year' | 'month' | 'day' | 'weekDay' | 'hours' | 'minutes' | 'seconds' | 'meridiem' | 'empty';
 export type FieldSectionContentType = 'digit' | 'digit-with-letter' | 'letter';
 export interface FieldSection {
@@ -69,12 +70,14 @@ export interface FieldSection {
      */
     endSeparator: string;
 }
-export interface FieldRef<TSection extends FieldSection> {
+type IsAny<T> = boolean extends (T extends never ? true : false) ? true : false;
+export type InferFieldSection<TValue extends PickerValidValue> = IsAny<TValue> extends true ? FieldSection : TValue extends PickerRangeValue ? FieldRangeSection : FieldSection;
+export interface FieldRef<TValue extends PickerValidValue> {
     /**
      * Returns the sections of the current value.
-     * @returns {TSection[]} The sections of the current value.
+     * @returns {InferFieldSection<TValue>[]} The sections of the current value.
      */
-    getSections: () => TSection[];
+    getSections: () => InferFieldSection<TValue>[];
     /**
      * Returns the index of the active section (the first focused section).
      * If no section is active, returns `null`.
@@ -98,10 +101,20 @@ export interface FieldRef<TSection extends FieldSection> {
     isFieldFocused: () => boolean;
 }
 export type FieldSelectedSections = number | FieldSectionType | null | 'all';
+export interface FieldOwnerState extends PickerOwnerState {
+    /**
+     * `true` if the field is disabled, `false` otherwise.
+     */
+    isFieldDisabled: boolean;
+    /**
+     * `true` if the field is read-only, `false` otherwise.
+     */
+    isFieldReadOnly: boolean;
+}
 /**
  * Props the prop `slotProps.field` of a picker can receive.
  */
-export type PickerFieldSlotProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean> = ExportedUseClearableFieldProps & Pick<UseFieldInternalProps<TValue, TSection, TEnableAccessibleFieldDOMStructure, unknown>, 'shouldRespectLeadingZeros' | 'readOnly'> & React.HTMLAttributes<HTMLDivElement> & {
+export type PickerFieldSlotProps<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean> = ExportedUseClearableFieldProps & Pick<UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, unknown>, 'shouldRespectLeadingZeros' | 'readOnly'> & React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
 /**
@@ -113,3 +126,4 @@ export type BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStruct
  * Props the built-in text field component can receive.
  */
 export type BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = TEnableAccessibleFieldDOMStructure extends false ? Omit<TextFieldProps, 'autoComplete' | 'error' | 'maxRows' | 'minRows' | 'multiline' | 'placeholder' | 'rows' | 'select' | 'SelectProps' | 'type'> : Partial<Omit<PickersTextFieldProps, keyof ExportedPickersSectionListProps>>;
+export {};

package/models/validation.d.ts

@@ -1,3 +1,4 @@
+import type { PickerValidValue } from '../internals/models';
 /**
  * Validation error types applicable to both date and time validation
  */
@@ -5,7 +6,7 @@ type CommonDateTimeValidationError = 'invalidDate' | 'disableFuture' | 'disableP
 export type DateValidationError = CommonDateTimeValidationError | 'shouldDisableDate' | 'shouldDisableMonth' | 'shouldDisableYear' | 'minDate' | 'maxDate';
 export type TimeValidationError = CommonDateTimeValidationError | 'minutesStep' | 'minTime' | 'maxTime' | 'shouldDisableTime-hours' | 'shouldDisableTime-minutes' | 'shouldDisableTime-seconds';
 export type DateTimeValidationError = DateValidationError | TimeValidationError;
-export interface OnErrorProps<TValue, TError> {
+export interface OnErrorProps<TValue extends PickerValidValue, TError> {
     /**
      * Callback fired when the error associated with the current value changes.
      * When a validation error is detected, the `error` parameter contains a non-null value.

package/modern/AdapterMoment/AdapterMoment.js

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

package/modern/DateCalendar/PickersFadeTransitionGroup.js

@@ -6,10 +6,7 @@ import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { getPickersFadeTransitionGroupUtilityClass } from "./pickersFadeTransitionGroupClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -36,9 +33,10 @@ export function PickersFadeTransitionGroup(inProps) {
     children,
     className,
     reduceAnimations,
-    transKey
+    transKey,
+    classes: classesProp
   } = props;
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   const theme = useTheme();
   if (reduceAnimations) {
     return children;

package/modern/DateCalendar/PickersSlideTransition.js

@@ -7,10 +7,10 @@ import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { getPickersSlideTransitionUtilityClass, pickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
     slideDirection
   } = ownerState;
   const slots = {
@@ -99,11 +99,18 @@ export function PickersSlideTransition(inProps) {
       children,
       className,
       reduceAnimations,
-      transKey
-      // extracting `classes` from `other`
+      slideDirection,
+      transKey,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    slideDirection
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
   const theme = useTheme();
   if (reduceAnimations) {
     return /*#__PURE__*/_jsx("div", {

package/modern/DateField/DateField.js

@@ -13,6 +13,7 @@ import { useDateField } from "./useDateField.js";
 import { useClearableField } from "../hooks/index.js";
 import { PickersTextField } from "../PickersTextField/index.js";
 import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -36,7 +37,7 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, inRe
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -267,10 +268,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   shouldDisableYear: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/modern/DateTimeField/DateTimeField.js

@@ -13,6 +13,7 @@ import { useDateTimeField } from "./useDateTimeField.js";
 import { useClearableField } from "../hooks/index.js";
 import { PickersTextField } from "../PickersTextField/index.js";
 import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -36,7 +37,7 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -307,10 +308,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   shouldDisableYear: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/modern/DateTimePicker/DateTimePickerTabs.js

@@ -11,6 +11,7 @@ import { TimeIcon, DateRangeIcon } from "../icons/index.js";
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { getDateTimePickerTabsUtilityClass } from "./dateTimePickerTabsClasses.js";
 import { isDatePickerView } from "../internals/utils/date-utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const viewToTab = view => {
   if (isDatePickerView(view)) {
@@ -24,10 +25,7 @@ const tabToView = tab => {
   }
   return 'hours';
 };
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -72,10 +70,14 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     className,
+    classes: classesProp,
     sx
   } = props;
   const translations = usePickerTranslations();
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   const handleChange = (event, value) => {
     onViewChange(tabToView(value));
   };
@@ -83,7 +85,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     return null;
   }
   return /*#__PURE__*/_jsxs(DateTimePickerTabsRoot, {
-    ownerState: props,
+    ownerState: ownerState,
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,