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

package/internals/hooks/useValueWithTimezone.js

@@ -11,6 +11,7 @@ export const useValueWithTimezone = ({
   timezone: timezoneProp,
   value: valueProp,
   defaultValue,
+  referenceDate,
   onChange,
   valueManager
 }) => {
@@ -24,7 +25,16 @@ export const useValueWithTimezone = ({
     }
     return valueManager.setTimezone(utils, inputTimezone, newValue);
   });
-  const timezoneToRender = timezoneProp ?? inputTimezone ?? 'default';
+  let timezoneToRender;
+  if (timezoneProp) {
+    timezoneToRender = timezoneProp;
+  } else if (inputTimezone) {
+    timezoneToRender = inputTimezone;
+  } else if (referenceDate) {
+    timezoneToRender = utils.getTimezone(referenceDate);
+  } else {
+    timezoneToRender = 'default';
+  }
   const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, inputValue), [valueManager, utils, timezoneToRender, inputValue]);
   const handleValueChange = useEventCallback((newValue, ...otherParams) => {
     const newValueWithInputTimezone = setInputTimezone(newValue);
@@ -45,6 +55,7 @@ export const useControlledValueWithTimezone = ({
   timezone: timezoneProp,
   value: valueProp,
   defaultValue,
+  referenceDate,
   onChange: onChangeProp,
   valueManager
 }) => {
@@ -62,6 +73,7 @@ export const useControlledValueWithTimezone = ({
     timezone: timezoneProp,
     value: valueWithInputTimezone,
     defaultValue: undefined,
+    referenceDate,
     onChange,
     valueManager
   });

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,15 +39,16 @@ 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';
 export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/toolbar';
 export type { FormProps } from './models/formProps';
-export type { WrapperVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem, } from './models/common';
+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/common.d.ts

@@ -1,4 +1,5 @@
 import { DateView, TimeView } from '../../models/views';
-export type WrapperVariant = 'mobile' | 'desktop' | null;
+export type PickerOrientation = 'portrait' | 'landscape';
+export type PickerVariant = 'mobile' | 'desktop' | null;
 export type TimeViewWithMeridiem = TimeView | 'meridiem';
 export type DateOrTimeViewWithMeridiem = DateView | TimeViewWithMeridiem;

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,8 +2,8 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { DateOrTimeViewWithMeridiem } from '../common';
-import { FormProps } from '../formProps';
-export interface BaseToolbarProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedBaseToolbarProps, FormProps {
+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

@@ -1,4 +1,4 @@
-import { DateView, FieldValueType, MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../models';
+import { DateView, MuiPickersAdapter, PickersTimezone, PickerValidDate, PickerValueType } from '../../models';
 import { DateOrTimeViewWithMeridiem } from '../models';
 export declare const mergeDateAndTime: (utils: MuiPickersAdapter, dateParam: PickerValidDate, timeParam: PickerValidDate) => PickerValidDate;
 interface FindClosestDateParams {
@@ -14,9 +14,9 @@ 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?: FieldValueType) => PickerValidDate;
+export declare const getTodayDate: (utils: MuiPickersAdapter, timezone: PickersTimezone, valueType?: PickerValueType) => PickerValidDate;
 export declare const formatMeridiem: (utils: MuiPickersAdapter, meridiem: "am" | "pm") => string;
 export declare const isDatePickerView: (view: DateOrTimeViewWithMeridiem) => view is DateView;
 export declare const resolveDateFormat: (utils: MuiPickersAdapter, { format, views }: {

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/common.d.ts

@@ -3,3 +3,4 @@ export interface TimeStepOptions {
     minutes?: number;
     seconds?: number;
 }
+export type PickerValueType = 'date' | 'time' | 'date-time';

package/models/fields.d.ts

@@ -4,10 +4,10 @@ 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 type FieldValueType = 'date' | 'time' | 'date-time';
 export interface FieldSection {
     /**
      * Value of the section, as rendered inside the input.
@@ -70,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`.
@@ -99,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>;
 };
 /**
@@ -114,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/pickers.d.ts

@@ -1,3 +1,4 @@
+import { PickerOrientation, PickerVariant } from '../internals/models/common';
 import type { PickersShortcutsItemContext } from '../PickersShortcuts';
 export interface PickerChangeHandlerContext<TError> {
     validationError: TError;
@@ -31,4 +32,21 @@ export interface PickerOwnerState {
      * Is always `false` if the component you are accessing the ownerState from is not wrapped by a picker.
      */
     isPickerReadOnly: boolean;
+    /**
+     * The responsive variant of the picker.
+     * Is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
+     * Is equal to "mobile" when using a mobile picker (like <MobileDatePicker />).
+     * Is equal to "mobile" or "desktop" when using a responsive picker (like <DatePicker />) depending on the `desktopModeMediaQuery` prop.
+     * Is equal to "mobile" or "desktop" when using a static picker (like <StaticDatePicker />) depending on the `displayStaticWrapperAs` prop.
+     * Is always equal to "desktop" if the component you are accessing the ownerState from is not wrapped by a picker.
+     */
+    pickerVariant: PickerVariant;
+    /**
+     * The orientation of the picker.
+     * Is equal to "landscape" when the picker is in landscape orientation.
+     * Is equal to "portrait" when the picker is in portrait orientation.
+     * You can use the "orientation" on any picker component to force the orientation.
+     * Is always equal to "portrait" if the component you are accessing the ownerState from is not wrapped by a picker.
+     */
+    pickerOrientation: PickerOrientation;
 }

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/DateCalendar.js

@@ -137,6 +137,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });

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/DatePicker/DatePickerToolbar.js

@@ -107,12 +107,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.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.
    * @default `true` for Desktop, `false` for Mobile.
@@ -126,12 +120,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.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/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, '')`.