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

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 { UsePickerLayoutProps, UsePickerLayoutPropsResponse } from './usePickerLayoutProps';
-import { FieldSection, PickerOwnerState } from '../../../models';
-import { DateOrTimeViewWithMeridiem } from '../../models';
-import { UsePickerProviderParameters, UsePickerProviderReturnValue } from './usePickerProvider';
+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>, UsePickerLayoutProps {
+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>, UsePickerLayoutProps {
+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' | 'wrapperVariant' | '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'>, UsePickerLayoutPropsResponse<TValue, TView> {
+export interface UsePickerResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Omit<UsePickerValueResponse<TValue, TError>, 'viewProps' | 'layoutProps'>, 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,10 +1,25 @@
-import { FieldSection, PickerOwnerState } from '../../../models';
-import { UsePickerValueResponse } from './usePickerValue.types';
+import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types';
 import { PickerProviderProps } from '../../components/PickerProvider';
-export interface UsePickerProviderParameters<TValue> extends Pick<PickerProviderProps, 'localeText'> {
-    pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
-    ownerState: PickerOwnerState;
+import type { UsePickerProps } from './usePicker.types';
+import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerVariant } from '../../models';
+export declare const usePickerOrientation: (views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined) => PickerOrientation;
+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, any>;
+    valueManager: PickerValueManager<TValue, any>;
+    variant: PickerVariant;
+    views: readonly DateOrTimeViewWithMeridiem[];
 }
 export interface UsePickerProviderReturnValue extends Omit<PickerProviderProps, 'children'> {
 }
-export declare function usePickerProvider<TValue>(parameters: UsePickerProviderParameters<TValue>): UsePickerProviderReturnValue;
+/**
+ * Props used to create the private context.
+ * Those props are exposed on all the pickers.
+ */
+export interface UsePickerProviderProps extends FormProps {
+    /**
+     * Force rendering in particular orientation.
+     */
+    orientation?: PickerOrientation;
+}

package/internals/hooks/usePicker/usePickerProvider.js

@@ -1,15 +1,66 @@
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useUtils } from "../useUtils.js";
+import { arrayIncludes } from "../../utils/utils.js";
+function getOrientation() {
+  if (typeof window === 'undefined') {
+    return 'portrait';
+  }
+  if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
+    return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
+  }
+
+  // Support IOS safari
+  if (window.orientation) {
+    return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
+  }
+  return 'portrait';
+}
+export const usePickerOrientation = (views, customOrientation) => {
+  const [orientation, setOrientation] = React.useState(getOrientation);
+  useEnhancedEffect(() => {
+    const eventHandler = () => {
+      setOrientation(getOrientation());
+    };
+    window.addEventListener('orientationchange', eventHandler);
+    return () => {
+      window.removeEventListener('orientationchange', eventHandler);
+    };
+  }, []);
+  if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
+    // could not display 13:34:44 in landscape mode
+    return 'portrait';
+  }
+  return customOrientation ?? orientation;
+};
 export function usePickerProvider(parameters) {
   const {
+    props,
     pickerValueResponse,
-    ownerState,
-    localeText
+    valueManager,
+    localeText,
+    variant,
+    views
   } = 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,
+    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
-  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open]);
+    open: pickerValueResponse.open,
+    disabled: props.disabled ?? false,
+    readOnly: props.readOnly ?? false,
+    variant,
+    orientation
+  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open, variant, orientation, props.disabled, props.readOnly]);
   const privateContextValue = React.useMemo(() => ({
     ownerState
   }), [ownerState]);
@@ -18,4 +69,9 @@ export function usePickerProvider(parameters) {
     contextValue,
     privateContextValue
   };
-}
+}
+
+/**
+ * Props used to create the private context.
+ * Those props are exposed on all the pickers.
+ */

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, wrapperVariant, 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.
@@ -113,7 +112,7 @@ export const usePickerValue = ({
   props,
   valueManager,
   valueType,
-  wrapperVariant,
+  variant,
   validator
 }) => {
   const {
@@ -121,8 +120,9 @@ export const usePickerValue = ({
     onChange,
     value: inValueWithoutRenderTimezone,
     defaultValue: inDefaultValue,
-    closeOnSelect = wrapperVariant === 'desktop',
-    timezone: timezoneProp
+    closeOnSelect = variant === 'desktop',
+    timezone: timezoneProp,
+    referenceDate
   } = props;
   const {
     current: defaultValue
@@ -130,6 +130,7 @@ export const usePickerValue = ({
   const {
     current: isControlled
   } = React.useRef(inValueWithoutRenderTimezone !== undefined);
+  const [previousTimezoneProp, setPreviousTimezoneProp] = React.useState(timezoneProp);
 
   /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
   if (process.env.NODE_ENV !== 'production') {
@@ -160,6 +161,7 @@ export const usePickerValue = ({
     timezone: timezoneProp,
     value: inValueWithoutRenderTimezone,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager
   });
@@ -176,10 +178,19 @@ export const usePickerValue = ({
       draft: initialValue,
       lastPublishedValue: initialValue,
       lastCommittedValue: initialValue,
-      lastControlledValue: inValueWithTimezoneToRender,
+      lastControlledValue: inValueWithoutRenderTimezone,
       hasBeenModifiedSinceMount: false
     };
   });
+  const timezoneFromDraftValue = valueManager.getTimezone(utils, dateState.draft);
+  if (previousTimezoneProp !== timezoneProp) {
+    setPreviousTimezoneProp(timezoneProp);
+    if (timezoneProp && timezoneFromDraftValue && timezoneProp !== timezoneFromDraftValue) {
+      setDateState(prev => _extends({}, prev, {
+        draft: valueManager.setTimezone(utils, timezoneProp, prev.draft)
+      }));
+    }
+  }
   const {
     getValidationErrorForNewValue
   } = useValidation({
@@ -229,10 +240,10 @@ export const usePickerValue = ({
       setIsOpen(false);
     }
   });
-  if (inValueWithTimezoneToRender !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValueWithTimezoneToRender))) {
+  if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
     const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValueWithTimezoneToRender);
     setDateState(prev => _extends({}, prev, {
-      lastControlledValue: inValueWithTimezoneToRender
+      lastControlledValue: inValueWithoutRenderTimezone
     }, isUpdateComingFromPicker ? {} : {
       lastCommittedValue: inValueWithTimezoneToRender,
       lastPublishedValue: inValueWithTimezoneToRender,

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

@@ -1,13 +1,14 @@
 import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
 import { Validator } from '../../../validation';
-import { WrapperVariant } from '../../models/common';
-import { FieldSection, FieldValueType, TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate, OnErrorProps, InferError } from '../../../models';
+import { PickerVariant } from '../../models/common';
+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,15 +21,15 @@ 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 {FieldValueType} valueType The type of the value being edited.
+     * @param {PickerValueType} valueType The type of the value being edited.
      * @returns {TValue} The value to set when clicking the "Today" button.
      */
-    getTodayValue: (utils: MuiPickersAdapter, timezone: PickersTimezone, valueType: FieldValueType) => TValue;
+    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,24 +106,24 @@ 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;
     /**
-     * Last value passed with `props.value`.
+     * Last value passed to `props.value`.
      * Used to update the `draft` value whenever the `value` prop changes.
      */
     lastControlledValue: TValue | undefined;
@@ -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,13 +226,14 @@ 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: FieldValueType;
-    wrapperVariant: WrapperVariant;
+    valueType: PickerValueType;
+    variant: PickerVariant;
     validator: Validator<TValue, InferError<TExternalProps>, TExternalProps>;
 }
 export interface UsePickerValueActions {
@@ -243,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;
@@ -256,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.
@@ -77,6 +77,7 @@ export interface UsePickerViewsResponse<TView extends DateOrTimeViewWithMeridiem
      * Indicates if the the picker has at least one view that should be rendered in UI.
      */
     hasUIView: boolean;
+    views: readonly TView[];
     renderCurrentView: () => React.ReactNode;
     shouldRestoreFocus: () => boolean;
     layoutProps: UsePickerViewsLayoutResponse<TView>;
@@ -92,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/usePicker/usePickerViews.js

@@ -134,6 +134,7 @@ export const usePickerViews = ({
   };
   return {
     hasUIView,
+    views,
     shouldRestoreFocus,
     layoutProps,
     renderCurrentView: () => {

package/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -48,7 +48,7 @@ export const useStaticPicker = _ref => {
     fieldRef: undefined,
     localeText,
     additionalViewProps: {},
-    wrapperVariant: displayStaticWrapperAs
+    variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {

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,17 +1,12 @@
 import type { PickerValueManager } from './usePicker';
-import { PickersTimezone } from '../../models';
+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, onChange, valueManager, }: {
-    timezone: PickersTimezone | undefined;
-    value: TValue | undefined;
-    defaultValue: TValue | undefined;
-    onChange: TChange | undefined;
-    valueManager: PickerValueManager<TValue, any>;
-}) => {
+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;
@@ -19,15 +14,25 @@ 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, onChange: onChangeProp, valueManager, }: {
-    name: string;
+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 extends PickerValidValue, TChange extends (...params: any[]) => void> {
     timezone: PickersTimezone | undefined;
     value: TValue | undefined;
     defaultValue: TValue | undefined;
+    /**
+     * The reference date as passed to `props.referenceDate`.
+     * It does not need to have its default value.
+     * This is only used to determine the timezone to use when `props.value` and `props.defaultValue` are not defined.
+     */
+    referenceDate: PickerValidDate | undefined;
     onChange: TChange | undefined;
     valueManager: PickerValueManager<TValue, any>;
-}) => {
-    value: TValue;
-    handleValueChange: TChange;
-    timezone: string;
-};
+}
+interface UseControlledValueWithTimezoneParameters<TValue extends PickerValidValue, TChange extends (...params: any[]) => void> extends UseValueWithTimezoneParameters<TValue, TChange> {
+    name: string;
+}
+export {};