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

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import TextField from '@mui/material/TextField';
-import { SlotComponentProps } from '@mui/utils';
+import type { TextFieldProps } from '@mui/material/TextField';
 import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersModalDialogSlots, PickersModalDialogSlotProps } from '../../components/PickersModalDialog';
 import { UsePickerParams } from '../usePicker';
-import { FieldSection, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
+import { FieldOwnerState, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
-import { DateOrTimeViewWithMeridiem } from '../../models';
-export interface UseMobilePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValidDate | null, TView> {
+import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
+import { PickersTextFieldProps } from '../../../PickersTextField';
+export interface UseMobilePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue, TView> {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -21,15 +21,15 @@ export interface UseMobilePickerSlots<TView extends DateOrTimeViewWithMeridiem>
      */
     textField?: React.ElementType;
 }
-export interface ExportedUseMobilePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValidDate | null, TView> {
-    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
-    textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
+export interface ExportedUseMobilePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue, TView> {
+    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
 }
-export interface UseMobilePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValidDate | null, TView>, 'toolbar'> {
+export interface UseMobilePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue, TView>, 'toolbar'> {
 }
 export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
 }
-export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends BasePickerProps<PickerValidDate | null, TView, TError, TExternalProps, {}>, MakeRequired<MobileOnlyPickerProps, 'format'> {
+export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps, {}>, MakeRequired<MobileOnlyPickerProps, 'format'> {
     /**
      * Overridable component slots.
      * @default {}
@@ -41,7 +41,7 @@ export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem,
      */
     slotProps?: UseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValidDate | null, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
+export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
     getOpenDialogAriaText: (date: PickerValidDate | null) => string;
 }

package/internals/hooks/useOpenState.d.ts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 export interface OpenStateProps {
     open?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
 }
 export declare const useOpenState: ({ open, onOpen, onClose }: OpenStateProps) => {
-    isOpen: boolean;
-    setIsOpen: (newIsOpen: boolean) => void;
+    open: boolean;
+    setOpen: (action: React.SetStateAction<boolean>) => void;
 };

package/internals/hooks/useOpenState.js

@@ -5,7 +5,7 @@ export const useOpenState = ({
   onClose
 }) => {
   const isControllingOpenProp = React.useRef(typeof open === 'boolean').current;
-  const [openState, setIsOpenState] = React.useState(false);
+  const [openState, setOpenState] = React.useState(false);
 
   // It is required to update inner state in useEffect in order to avoid situation when
   // Our component is not mounted yet, but `open` state is set to `true` (for example initially opened)
@@ -14,22 +14,23 @@ export const useOpenState = ({
       if (typeof open !== 'boolean') {
         throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
       }
-      setIsOpenState(open);
+      setOpenState(open);
     }
   }, [isControllingOpenProp, open]);
-  const setIsOpen = React.useCallback(newIsOpen => {
+  const setOpen = React.useCallback(action => {
+    const newOpen = typeof action === 'function' ? action(openState) : action;
     if (!isControllingOpenProp) {
-      setIsOpenState(newIsOpen);
+      setOpenState(newOpen);
     }
-    if (newIsOpen && onOpen) {
+    if (newOpen && onOpen) {
       onOpen();
     }
-    if (!newIsOpen && onClose) {
+    if (!newOpen && onClose) {
       onClose();
     }
-  }, [isControllingOpenProp, onOpen, onClose]);
+  }, [isControllingOpenProp, onOpen, onClose, openState]);
   return {
-    isOpen: openState,
-    setIsOpen
+    open: openState,
+    setOpen
   };
 };

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

@@ -1,4 +1,4 @@
 import { UsePickerParams, UsePickerProps, UsePickerResponse } from './usePicker.types';
-import { FieldSection, InferError } from '../../../models';
-import { DateOrTimeViewWithMeridiem } from '../../models';
-export declare const usePicker: <TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, valueType, variant, additionalViewProps, validator, autoFocusView, rendererInterceptor, fieldRef, localeText, }: UsePickerParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>>;
+import { InferError } from '../../../models';
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../../models';
+export declare const usePicker: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, valueType, variant, additionalViewProps, validator, autoFocusView, rendererInterceptor, fieldRef, localeText, }: UsePickerParams<TValue, TView, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, InferError<TExternalProps>>;

package/internals/hooks/usePicker/usePicker.js

@@ -1,7 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { warnOnce } from '@mui/x-internals/warning';
 import { usePickerValue } from "./usePickerValue.js";
 import { usePickerViews } from "./usePickerViews.js";
-import { usePickerLayoutProps } from "./usePickerLayoutProps.js";
 import { usePickerProvider } from "./usePickerProvider.js";
 export const usePicker = ({
   props,
@@ -35,19 +35,13 @@ export const usePicker = ({
     propsFromPickerValue: pickerValueResponse.viewProps,
     rendererInterceptor
   });
-  const pickerLayoutResponse = usePickerLayoutProps({
-    props,
-    variant,
-    propsFromPickerValue: pickerValueResponse.layoutProps,
-    propsFromPickerViews: pickerViewsResponse.layoutProps
-  });
   const providerProps = usePickerProvider({
     props,
-    pickerValueResponse,
     localeText,
     valueManager,
     variant,
-    views: pickerViewsResponse.views
+    views: pickerViewsResponse.views,
+    paramsFromUsePickerValue: pickerValueResponse.provider
   });
   return {
     // Picker value
@@ -59,7 +53,7 @@ export const usePicker = ({
     hasUIView: pickerViewsResponse.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
-    layoutProps: pickerLayoutResponse.layoutProps,
+    layoutProps: _extends({}, pickerViewsResponse.layoutProps, pickerValueResponse.layoutProps),
     // Picker provider
     providerProps,
     // Picker owner state

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

@@ -1,20 +1,20 @@
 import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps, UsePickerValueResponse } from './usePickerValue.types';
 import { UsePickerViewsProps, UsePickerViewParams, UsePickerViewsResponse, UsePickerViewsBaseProps } from './usePickerViews';
-import { UsePickerLayoutPropsResponse } from './usePickerLayoutProps';
-import { FieldSection, PickerOwnerState } from '../../../models';
-import { DateOrTimeViewWithMeridiem } from '../../models';
+import { PickerOwnerState } from '../../../models';
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../../models';
 import { UsePickerProviderParameters, UsePickerProviderProps, UsePickerProviderReturnValue } from './usePickerProvider';
 /**
  * Props common to all picker headless implementations.
  */
-export interface UsePickerBaseProps<TValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerProviderProps {
+export interface UsePickerBaseProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerProviderProps {
 }
-export interface UsePickerProps<TValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerProviderProps {
+export interface UsePickerProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerProviderProps {
 }
-export interface UsePickerParams<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'variant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue>, 'localeText'> {
+export interface UsePickerParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'variant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue>, 'localeText'> {
     props: TExternalProps;
 }
-export interface UsePickerResponse<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError> extends Omit<UsePickerValueResponse<TValue, TSection, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps' | 'views'>, UsePickerLayoutPropsResponse<TValue, TView> {
+export interface UsePickerResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Pick<UsePickerValueResponse<TValue, TError>, 'open' | 'actions' | 'fieldProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps' | 'views'> {
     ownerState: PickerOwnerState;
     providerProps: UsePickerProviderReturnValue;
+    layoutProps: UsePickerValueResponse<TValue, TError>['layoutProps'] & UsePickerViewsResponse<TView>['layoutProps'];
 }

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

@@ -1,16 +1,15 @@
-import { FieldSection } from '../../../models';
-import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types';
+import { PickerValueManager, UsePickerValueProviderParams } from './usePickerValue.types';
 import { PickerProviderProps } from '../../components/PickerProvider';
 import type { UsePickerProps } from './usePicker.types';
-import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerVariant } from '../../models';
+import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerVariant } from '../../models';
 export declare const usePickerOrientation: (views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined) => PickerOrientation;
-export declare function usePickerProvider<TValue>(parameters: UsePickerProviderParameters<TValue>): UsePickerProviderReturnValue;
-export interface UsePickerProviderParameters<TValue> extends Pick<PickerProviderProps, 'localeText'> {
+export declare function usePickerProvider<TValue extends PickerValidValue>(parameters: UsePickerProviderParameters<TValue>): UsePickerProviderReturnValue;
+export interface UsePickerProviderParameters<TValue extends PickerValidValue> extends Pick<PickerProviderProps, 'localeText'> {
     props: UsePickerProps<TValue, any, any, any, any>;
-    pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
     valueManager: PickerValueManager<TValue, any>;
     variant: PickerVariant;
     views: readonly DateOrTimeViewWithMeridiem[];
+    paramsFromUsePickerValue: UsePickerValueProviderParams<TValue>;
 }
 export interface UsePickerProviderReturnValue extends Omit<PickerProviderProps, 'children'> {
 }

package/internals/hooks/usePicker/usePickerProvider.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useUtils } from "../useUtils.js";
@@ -36,31 +37,28 @@ export const usePickerOrientation = (views, customOrientation) => {
 export function usePickerProvider(parameters) {
   const {
     props,
-    pickerValueResponse,
     valueManager,
     localeText,
     variant,
-    views
+    views,
+    paramsFromUsePickerValue
   } = parameters;
   const utils = useUtils();
   const orientation = usePickerOrientation(views, props.orientation);
   const ownerState = React.useMemo(() => ({
-    isPickerValueEmpty: valueManager.areValuesEqual(utils, pickerValueResponse.viewProps.value, valueManager.emptyValue),
-    isPickerOpen: pickerValueResponse.open,
+    isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
+    isPickerOpen: paramsFromUsePickerValue.contextValue.open,
     isPickerDisabled: props.disabled ?? false,
     isPickerReadOnly: props.readOnly ?? false,
     pickerOrientation: orientation,
     pickerVariant: variant
-  }), [utils, valueManager, pickerValueResponse.viewProps.value, pickerValueResponse.open, orientation, variant, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => ({
-    onOpen: pickerValueResponse.actions.onOpen,
-    onClose: pickerValueResponse.actions.onClose,
-    open: pickerValueResponse.open,
+  }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
+  const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, {
     disabled: props.disabled ?? false,
     readOnly: props.readOnly ?? false,
     variant,
     orientation
-  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open, variant, orientation, props.disabled, props.readOnly]);
+  }), [paramsFromUsePickerValue.contextValue, variant, orientation, props.disabled, props.readOnly]);
   const privateContextValue = React.useMemo(() => ({
     ownerState
   }), [ownerState]);

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

@@ -1,6 +1,7 @@
-import { FieldSection, InferError } from '../../../models';
+import { InferError } from '../../../models';
 import { UsePickerValueProps, UsePickerValueParams, UsePickerValueResponse } from './usePickerValue.types';
+import { PickerValidValue } from '../../models';
 /**
  * Manage the value lifecycle of all the pickers.
  */
-export declare const usePickerValue: <TValue, TSection extends FieldSection, TExternalProps extends UsePickerValueProps<TValue, any>>({ props, valueManager, valueType, variant, validator, }: UsePickerValueParams<TValue, TExternalProps>) => UsePickerValueResponse<TValue, TSection, InferError<TExternalProps>>;
+export declare const usePickerValue: <TValue extends PickerValidValue, TExternalProps extends UsePickerValueProps<TValue, any>>({ props, valueManager, valueType, variant, validator, }: UsePickerValueParams<TValue, TExternalProps>) => UsePickerValueResponse<TValue, InferError<TExternalProps>>;

package/internals/hooks/usePicker/usePickerValue.js

@@ -5,7 +5,6 @@ import { useOpenState } from "../useOpenState.js";
 import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { useValidation } from "../../../validation/index.js";
 import { useValueWithTimezone } from "../useValueWithTimezone.js";
-
 /**
  * Decide if the new value should be published
  * The published value will be passed to `onChange` if defined.
@@ -151,8 +150,8 @@ export const usePickerValue = ({
   const utils = useUtils();
   const adapter = useLocalizationContext();
   const {
-    isOpen,
-    setIsOpen
+    open,
+    setOpen
   } = useOpenState(props);
   const {
     timezone,
@@ -238,7 +237,7 @@ export const usePickerValue = ({
       onAccept(action.value, getContext());
     }
     if (shouldClose) {
-      setIsOpen(false);
+      setOpen(false);
     }
   });
   if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
@@ -289,11 +288,11 @@ export const usePickerValue = ({
   });
   const handleOpen = useEventCallback(event => {
     event.preventDefault();
-    setIsOpen(true);
+    setOpen(true);
   });
   const handleClose = useEventCallback(event => {
     event?.preventDefault();
-    setIsOpen(false);
+    setOpen(false);
   });
   const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
@@ -324,12 +323,12 @@ export const usePickerValue = ({
     value: dateState.draft,
     onChange: handleChangeFromField
   };
-  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
+  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onClose: handleClose,
-    open: isOpen
+    open
   };
   const isValid = testedValue => {
     const error = validator({
@@ -341,16 +340,27 @@ export const usePickerValue = ({
     return !valueManager.hasError(error);
   };
   const layoutResponse = _extends({}, actions, {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onSelectShortcut: handleSelectShortcut,
     isValid
   });
+  const contextValue = React.useMemo(() => {
+    return {
+      open,
+      setOpen
+    };
+  }, [open, setOpen]);
+  const providerParams = {
+    value: valueWithoutError,
+    contextValue
+  };
   return {
-    open: isOpen,
+    open,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions
+    actions,
+    provider: providerParams
   };
 };

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

@@ -1,13 +1,15 @@
+import * as React from 'react';
 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 +22,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 +30,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 +50,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 +61,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 +90,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 +98,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 +107,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 +137,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 +150,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 +171,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 +227,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 +246,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 +259,41 @@ 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> {
+/**
+ * Params passed to `usePickerProvider`.
+ */
+export interface UsePickerValueProviderParams<TValue extends PickerValidValue> {
+    value: TValue;
+    contextValue: UsePickerValueContextValue;
+}
+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>;
+    provider: UsePickerValueProviderParams<TValue>;
+}
+export interface UsePickerValueContextValue {
+    /**
+     * Sets the current open state of the Picker.
+     * ```ts
+     * setOpen(true); // Opens the picker.
+     * setOpen(false); // Closes the picker.
+     * setOpen((prevOpen) => !prevOpen); // Toggles the open state.
+     * ```
+     * @param {React.SetStateAction<boolean>} action The new open state of the Picker.
+     * It can be a function that will receive the current open state.
+     */
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * `true` if the picker is open, `false` otherwise.
+     */
+    open: boolean;
 }

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 {};