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

package/internals/hooks/usePicker/usePickerValue.types.d.ts

@@ -1,13 +1,14 @@
 import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
 import { Validator } from '../../../validation';
 import { PickerVariant } from '../../models/common';
-import { FieldSection, TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate, OnErrorProps, InferError, PickerValueType } from '../../../models';
+import { TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate, OnErrorProps, InferError, PickerValueType } from '../../../models';
 import { GetDefaultReferenceDateProps } from '../../utils/getDefaultReferenceDate';
 import { PickerShortcutChangeImportance, PickersShortcutsItemContext } from '../../../PickersShortcuts';
-export interface PickerValueManager<TValue, TError> {
+import { InferNonNullablePickerValue, PickerValidValue } from '../../models';
+export interface PickerValueManager<TValue extends PickerValidValue, TError> {
     /**
      * Determines if two values are equal.
-     * @template TValue
+     * @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.
      * @param {MuiPickersAdapter} utils The adapter.
      * @param {TValue} valueLeft The first value to compare.
      * @param {TValue} valueRight The second value to compare.
@@ -20,7 +21,7 @@ export interface PickerValueManager<TValue, TError> {
     emptyValue: TValue;
     /**
      * Method returning the value to set when clicking the "Today" button
-     * @template TValue
+     * @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.
      * @param {MuiPickersAdapter} utils The adapter.
      * @param {PickersTimezone} timezone The current timezone.
      * @param {PickerValueType} valueType The type of the value being edited.
@@ -28,7 +29,7 @@ export interface PickerValueManager<TValue, TError> {
      */
     getTodayValue: (utils: MuiPickersAdapter, timezone: PickersTimezone, valueType: PickerValueType) => TValue;
     /**
-     * @template TValue
+     * @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.
      * Method returning the reference value to use when mounting the component.
      * @param {object} params The params of the method.
      * @param {PickerValidDate | undefined} params.referenceDate The referenceDate provided by the user.
@@ -48,10 +49,10 @@ export interface PickerValueManager<TValue, TError> {
         granularity: number;
         timezone: PickersTimezone;
         getTodayDate?: () => PickerValidDate;
-    }) => TValue;
+    }) => InferNonNullablePickerValue<TValue>;
     /**
      * Method parsing the input value to replace all invalid dates by `null`.
-     * @template TValue
+     * @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.
      * @param {MuiPickersAdapter} utils The adapter.
      * @param {TValue} value The value to parse.
      * @returns {TValue} The value without invalid date.
@@ -59,7 +60,7 @@ export interface PickerValueManager<TValue, TError> {
     cleanValue: (utils: MuiPickersAdapter, value: TValue) => TValue;
     /**
      * Generates the new value, given the previous value and the new proposed value.
-     * @template TValue
+     * @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.
      * @param {MuiPickersAdapter} utils The adapter.
      * @param {TValue} lastValidDateValue The last valid value.
      * @param {TValue} value The proposed value.
@@ -88,7 +89,7 @@ export interface PickerValueManager<TValue, TError> {
     /**
      * Return the timezone of the date inside a value.
      * Throw an error on range picker if both values don't have the same timezone.
-     @template TValue
+     * @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.
      @param {MuiPickersAdapter} utils The utils to manipulate the date.
      @param {TValue} value The current value.
      @returns {string | null} The timezone of the current value.
@@ -96,7 +97,7 @@ export interface PickerValueManager<TValue, TError> {
     getTimezone: (utils: MuiPickersAdapter, value: TValue) => string | null;
     /**
      * Change the timezone of the dates inside a value.
-     @template TValue
+     * @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.
      @param {MuiPickersAdapter} utils The utils to manipulate the date.
      @param {PickersTimezone} timezone The current timezone.
      @param {TValue} value The value to convert.
@@ -105,19 +106,19 @@ export interface PickerValueManager<TValue, TError> {
     setTimezone: (utils: MuiPickersAdapter, timezone: PickersTimezone, value: TValue) => TValue;
 }
 export type PickerSelectionState = 'partial' | 'shallow' | 'finish';
-export interface UsePickerValueState<TValue> {
+export interface UsePickerValueState<TValue extends PickerValidValue> {
     /**
      * Date displayed on the views and the field.
      * It is updated whenever the user modifies something.
      */
     draft: TValue;
     /**
-     * Last value published (e.g: the last value for which `shouldPublishValue` returned `true`).
+     * Last value published (the last value for which `shouldPublishValue` returned `true`).
      * If `onChange` is defined, it's the value that was passed on the last call to this callback.
      */
     lastPublishedValue: TValue;
     /**
-     * Last value committed (e.g: the last value for which `shouldCommitValue` returned `true`).
+     * Last value committed (the last value for which `shouldCommitValue` returned `true`).
      * If `onAccept` is defined, it's the value that was passed on the last call to this callback.
      */
     lastCommittedValue: TValue;
@@ -135,12 +136,12 @@ export interface UsePickerValueState<TValue> {
      */
     hasBeenModifiedSinceMount: boolean;
 }
-export interface PickerValueUpdaterParams<TValue, TError> {
+export interface PickerValueUpdaterParams<TValue extends PickerValidValue, TError> {
     action: PickerValueUpdateAction<TValue, TError>;
     dateState: UsePickerValueState<TValue>;
     /**
      * Check if the new draft value has changed compared to some given value.
-     * @template TValue
+     * @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.
      * @param {TValue} comparisonValue The value to compare the new draft value with.
      * @returns {boolean} `true` if the new draft value is equal to the comparison value.
      */
@@ -148,7 +149,7 @@ export interface PickerValueUpdaterParams<TValue, TError> {
     isControlled: boolean;
     closeOnSelect: boolean;
 }
-export type PickerValueUpdateAction<TValue, TError> = {
+export type PickerValueUpdateAction<TValue extends PickerValidValue, TError> = {
     name: 'setValueFromView';
     value: TValue;
     selectionState: PickerSelectionState;
@@ -169,7 +170,7 @@ export type PickerValueUpdateAction<TValue, TError> = {
 /**
  * Props used to handle the value that are common to all pickers.
  */
-export interface UsePickerValueBaseProps<TValue, TError> extends OnErrorProps<TValue, TError> {
+export interface UsePickerValueBaseProps<TValue extends PickerValidValue, TError> extends OnErrorProps<TValue, TError> {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -225,10 +226,10 @@ export interface UsePickerValueNonStaticProps {
 /**
  * Props used to handle the value of the pickers.
  */
-export interface UsePickerValueProps<TValue, TError> extends UsePickerValueBaseProps<TValue, TError>, UsePickerValueNonStaticProps, TimezoneProps {
+export interface UsePickerValueProps<TValue extends PickerValidValue, TError> extends UsePickerValueBaseProps<TValue, TError>, UsePickerValueNonStaticProps, TimezoneProps {
     referenceDate?: PickerValidDate;
 }
-export interface UsePickerValueParams<TValue, TExternalProps extends UsePickerValueProps<TValue, any>> {
+export interface UsePickerValueParams<TValue extends PickerValidValue, TExternalProps extends UsePickerValueProps<TValue, any>> {
     props: TExternalProps;
     valueManager: PickerValueManager<TValue, InferError<TExternalProps>>;
     valueType: PickerValueType;
@@ -244,11 +245,11 @@ export interface UsePickerValueActions {
     onOpen: (event: React.UIEvent) => void;
     onClose: (event?: React.UIEvent) => void;
 }
-export type UsePickerValueFieldResponse<TValue, TSection extends FieldSection, TError> = Required<Pick<UseFieldInternalProps<TValue, TSection, any, TError>, 'value' | 'onChange'>>;
+export type UsePickerValueFieldResponse<TValue extends PickerValidValue, TError> = Required<Pick<UseFieldInternalProps<TValue, any, TError>, 'value' | 'onChange'>>;
 /**
  * Props passed to `usePickerViews`.
  */
-export interface UsePickerValueViewsResponse<TValue> {
+export interface UsePickerValueViewsResponse<TValue extends PickerValidValue> {
     value: TValue;
     onChange: (value: TValue, selectionState?: PickerSelectionState) => void;
     open: boolean;
@@ -257,16 +258,16 @@ export interface UsePickerValueViewsResponse<TValue> {
 /**
  * Props passed to `usePickerLayoutProps`.
  */
-export interface UsePickerValueLayoutResponse<TValue> extends UsePickerValueActions {
+export interface UsePickerValueLayoutResponse<TValue extends PickerValidValue> extends UsePickerValueActions {
     value: TValue;
     onChange: (newValue: TValue) => void;
     onSelectShortcut: (newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext) => void;
     isValid: (value: TValue) => boolean;
 }
-export interface UsePickerValueResponse<TValue, TSection extends FieldSection, TError> {
+export interface UsePickerValueResponse<TValue extends PickerValidValue, TError> {
     open: boolean;
     actions: UsePickerValueActions;
     viewProps: UsePickerValueViewsResponse<TValue>;
-    fieldProps: UsePickerValueFieldResponse<TValue, TSection, TError>;
+    fieldProps: UsePickerValueFieldResponse<TValue, TError>;
     layoutProps: UsePickerValueLayoutResponse<TValue>;
 }

package/internals/hooks/usePicker/usePickerViews.d.ts

@@ -3,11 +3,11 @@ import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { UseViewsOptions } from '../useViews';
 import type { UsePickerValueViewsResponse } from './usePickerValue.types';
-import { DateOrTimeViewWithMeridiem } from '../../models';
-import { FieldRef, FieldSection, PickerValidDate, TimezoneProps } from '../../../models';
+import { DateOrTimeViewWithMeridiem, PickerRangeValue, PickerValidValue, PickerValue } from '../../models';
+import { FieldRef, PickerValidDate, TimezoneProps } from '../../../models';
 interface PickerViewsRendererBaseExternalProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<UsePickerViewsProps<any, TView, any, any>, 'openTo' | 'viewRenderers'> {
 }
-export type PickerViewsRendererProps<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = Omit<TExternalProps, 'className' | 'sx'> & TAdditionalProps & UsePickerValueViewsResponse<TValue> & {
+export type PickerViewsRendererProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = Omit<TExternalProps, 'className' | 'sx'> & TAdditionalProps & UsePickerValueViewsResponse<TValue> & {
     view: TView;
     views: readonly TView[];
     focusedView: TView | null;
@@ -15,14 +15,14 @@ export type PickerViewsRendererProps<TValue, TView extends DateOrTimeViewWithMer
     showViewSwitcher: boolean;
     timeViewsCount: number;
 };
-export type PickerViewRenderer<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = (props: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
-export type PickerViewRendererLookup<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<any>, TAdditionalProps extends {}> = {
+export type PickerViewRenderer<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = (props: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
+export type PickerViewRendererLookup<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<any>, TAdditionalProps extends {}> = {
     [K in TView]: PickerViewRenderer<TValue, K, TExternalProps, TAdditionalProps> | null;
 };
 /**
  * Props used to handle the views that are common to all pickers.
  */
-export interface UsePickerViewsBaseProps<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps {
+export interface UsePickerViewsBaseProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps {
     /**
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be used.
@@ -52,16 +52,16 @@ export interface UsePickerViewsNonStaticProps {
 /**
  * Props used to handle the value of the pickers.
  */
-export interface UsePickerViewsProps<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps> {
+export interface UsePickerViewsProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps> {
     className?: string;
     sx?: SxProps<Theme>;
 }
-export interface UsePickerViewParams<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>, TAdditionalProps extends {}> {
+export interface UsePickerViewParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>, TAdditionalProps extends {}> {
     props: TExternalProps;
     propsFromPickerValue: UsePickerValueViewsResponse<TValue>;
     additionalViewProps: TAdditionalProps;
     autoFocusView: boolean;
-    fieldRef: React.RefObject<FieldRef<TSection>> | undefined;
+    fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue>> | undefined;
     /**
      * A function that intercepts the regular picker rendering.
      * Can be used to consume the provided `viewRenderers` and render a custom component wrapping them.
@@ -93,5 +93,5 @@ export interface UsePickerViewsLayoutResponse<TView extends DateOrTimeViewWithMe
  * - Handles the switch between UI views and field views
  * - Handles the focus management when switching views
  */
-export declare const usePickerViews: <TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}>({ props, propsFromPickerValue, additionalViewProps, autoFocusView, rendererInterceptor, fieldRef, }: UsePickerViewParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerViewsResponse<TView>;
+export declare const usePickerViews: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}>({ props, propsFromPickerValue, additionalViewProps, autoFocusView, rendererInterceptor, fieldRef, }: UsePickerViewParams<TValue, TView, TExternalProps, TAdditionalProps>) => UsePickerViewsResponse<TView>;
 export {};

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.