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

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,18 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props", "getOpenDialogAriaText"],
-  _excluded2 = ["ownerState"],
-  _excluded3 = ["ownerState"];
+const _excluded = ["props"],
+  _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import MuiInputAdornment from '@mui/material/InputAdornment';
-import IconButton from '@mui/material/IconButton';
 import useForkRef from '@mui/utils/useForkRef';
 import useId from '@mui/utils/useId';
-import { PickersPopper } from "../../components/PickersPopper.js";
+import { PickerPopper } from "../../components/PickerPopper/PickerPopper.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
+import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
 
 /**
  * Hook managing all the single-date desktop pickers:
@@ -23,130 +21,48 @@ import { PickerProvider } from "../../components/PickerProvider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useDesktopPicker = _ref => {
   let {
-      props,
-      getOpenDialogAriaText
+      props
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     slots,
     slotProps: innerSlotProps,
-    className,
-    sx,
-    format,
-    formatDensity,
-    enableAccessibleFieldDOMStructure,
-    selectedSections,
-    onSelectedSectionsChange,
-    timezone,
-    name,
     label,
     inputRef,
     readOnly,
-    disabled,
     autoFocus,
-    localeText,
-    reduceAnimations
+    localeText
   } = props;
-  const containerRef = React.useRef(null);
   const fieldRef = React.useRef(null);
   const labelId = useId();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    open,
-    actions,
-    hasUIView,
-    layoutProps,
     providerProps,
     renderCurrentView,
-    shouldRestoreFocus,
-    fieldProps: pickerFieldProps,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
     localeText,
     autoFocusView: true,
-    additionalViewProps: {},
     variant: 'desktop'
   }));
-  const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
+  const Field = slots.field;
   const _useSlotProps = useSlotProps({
-      elementType: InputAdornment,
-      externalSlotProps: innerSlotProps?.inputAdornment,
-      additionalProps: {
-        position: 'end'
-      },
+      elementType: Field,
+      externalSlotProps: innerSlotProps?.field,
+      additionalProps: _extends({
+        // Internal props
+        readOnly,
+        autoFocus: autoFocus && !props.open,
+        // Forwarded props
+        focused: providerProps.contextValue.open ? true : undefined
+      }, isToolbarHidden && {
+        id: labelId
+      }),
       ownerState
     }),
-    inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const OpenPickerButton = slots.openPickerButton ?? IconButton;
-  const _useSlotProps2 = useSlotProps({
-      elementType: OpenPickerButton,
-      externalSlotProps: innerSlotProps?.openPickerButton,
-      additionalProps: {
-        disabled: disabled || readOnly,
-        onClick: open ? actions.onClose : actions.onOpen,
-        'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
-        edge: inputAdornmentProps.position
-      },
-      ownerState
-    }),
-    openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
-  const OpenPickerIcon = slots.openPickerIcon;
-  const openPickerIconProps = useSlotProps({
-    elementType: OpenPickerIcon,
-    externalSlotProps: innerSlotProps?.openPickerIcon,
-    ownerState
-  });
-  const Field = slots.field;
-  const fieldProps = useSlotProps({
-    elementType: Field,
-    externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({
-      // Internal props
-      readOnly,
-      disabled,
-      format,
-      formatDensity,
-      enableAccessibleFieldDOMStructure,
-      selectedSections,
-      onSelectedSectionsChange,
-      timezone,
-      autoFocus: autoFocus && !props.open
-    }, pickerFieldProps, {
-      // onChange and value
-
-      // Forwarded props
-      className,
-      sx,
-      label,
-      name,
-      focused: open ? true : undefined
-    }, isToolbarHidden && {
-      id: labelId
-    }, !!inputRef && {
-      inputRef
-    }),
-    ownerState
-  });
-
-  // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
-  if (hasUIView) {
-    fieldProps.InputProps = _extends({}, fieldProps.InputProps, {
-      ref: containerRef
-    }, !props.disableOpenPicker && {
-      [`${inputAdornmentProps.position}Adornment`]: /*#__PURE__*/_jsx(InputAdornment, _extends({}, inputAdornmentProps, {
-        children: /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
-          children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, openPickerIconProps))
-        }))
-      }))
-    });
-  }
-  const slotsForField = _extends({
-    textField: slots.textField,
-    clearIcon: slots.clearIcon,
-    clearButton: slots.clearButton
-  }, fieldProps.slots);
+    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const Layout = slots.layout ?? PickersLayout;
   let labelledById = labelId;
   if (isToolbarHidden) {
@@ -164,28 +80,27 @@ export const useDesktopPicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.popper)
   });
+
+  // TODO: This `as any` will go away once the field ref is handled by the context.
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-      slots: slotsForField,
-      slotProps: slotProps,
-      unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/_jsx(PickersPopper, _extends({
-      role: "dialog",
-      placement: "bottom-start",
-      anchorEl: containerRef.current
-    }, actions, {
-      open: open,
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
-      shouldRestoreFocus: shouldRestoreFocus,
-      reduceAnimations: reduceAnimations,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
+      inputRef: inputRef,
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
+        unstableFieldRef: handleFieldRef
+      })), /*#__PURE__*/_jsx(PickerPopper, {
+        role: "dialog",
         slots: slots,
         slotProps: slotProps,
-        children: renderCurrentView()
-      }))
-    }))]
+        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+          slots: slots,
+          slotProps: slotProps,
+          children: renderCurrentView()
+        }))
+      })]
+    })
   }));
   return {
     renderPicker

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

@@ -1,19 +1,16 @@
 import * as React from 'react';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
-import { InputAdornmentProps } from '@mui/material/InputAdornment';
-import TextField from '@mui/material/TextField';
-import { SlotComponentProps } from '@mui/utils';
 import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
-import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper';
+import { BasePickerProps } from '../../models/props/basePickerProps';
+import { PickerPopperSlots, PickerPopperSlotProps } from '../../components/PickerPopper/PickerPopper';
 import { UsePickerParams } from '../usePicker';
-import { FieldSection, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
+import { PickerFieldSlotProps, PickerOwnerState } 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';
-import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../../../hooks/useClearableField';
-export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValidDate | null, TView>, UseClearableFieldSlots {
+import { UsePickerViewsProps } from '../usePicker/usePickerViews';
+import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
+import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '../../components/PickerFieldUI';
+import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
+export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -23,50 +20,31 @@ export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem>
      * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
      */
     textField?: React.ElementType;
-    /**
-     * Component displayed on the start or end input adornment used to open the picker on desktop.
-     * @default InputAdornment
-     */
-    inputAdornment?: React.ElementType<InputAdornmentProps>;
-    /**
-     * Button to open the picker on desktop.
-     * @default IconButton
-     */
-    openPickerButton?: React.ElementType<IconButtonProps>;
-    /**
-     * Icon displayed in the open picker button on desktop.
-     */
-    openPickerIcon: React.ElementType;
 }
-export interface UseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValidDate | null, TView>, 'toolbar'> {
+export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
 }
-export interface ExportedUseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValidDate | null, TView>, UseClearableFieldSlotProps {
-    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
-    textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
-    inputAdornment?: SlotComponentPropsFromProps<InputAdornmentProps, {}, PickerOwnerState>;
-    openPickerButton?: SlotComponentProps<typeof IconButton, {}, PickerOwnerState>;
-    openPickerIcon?: SlotComponentPropsFromProps<Record<string, any>, {}, PickerOwnerState>;
+export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {
 }
-export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
+export interface DesktopOnlyPickerProps extends UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
     /**
      * If `true`, the `input` element is focused during the first mount.
      * @default false
      */
     autoFocus?: boolean;
 }
-export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<PickerValidDate | null, TView, any, {}>> extends BasePickerProps<PickerValidDate | null, TView, TError, TExternalProps, {}>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
+export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<PickerValue, TView, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots: UseDesktopPickerSlots<TView>;
+    slots: UseDesktopPickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValidDate | null, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
+export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
     props: TExternalProps;
-    getOpenDialogAriaText: (date: PickerValidDate | null) => string;
 }

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -113,7 +113,7 @@ const createSection = ({
   const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
   const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
   const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
-  const isValidDate = date != null && utils.isValid(date);
+  const isValidDate = utils.isValid(date);
   let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
   let maxLength = null;
   if (hasLeadingZerosInInput) {

package/internals/hooks/useField/index.d.ts

@@ -1,3 +1,5 @@
 export { useField } from './useField';
 export type { FieldValueManager, UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext, } from './useField.types';
 export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, } from './useField.utils';
+export { useFieldInternalPropsWithDefaults } from './useFieldInternalPropsWithDefaults';
+export type { PickerFieldPrivateContextValue } from './useFieldInternalPropsWithDefaults';

package/internals/hooks/useField/index.js

@@ -1,2 +1,3 @@
 export { useField } from "./useField.js";
-export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
+export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
+export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

package/internals/hooks/useField/useField.d.ts

@@ -1,5 +1,5 @@
 import { UseFieldParams, UseFieldResponse, UseFieldCommonForwardedProps, UseFieldInternalProps, UseFieldForwardedProps } from './useField.types';
-import { FieldSection } from '../../../models';
-export declare const useField: <TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any> & {
+import { PickerValidValue } from '../../models';
+export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any> & {
     minutesStep?: number;
-}>(params: UseFieldParams<TValue, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;
+}>(params: UseFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;

package/internals/hooks/useField/useField.js

@@ -4,7 +4,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useValidation } from "../../../validation/index.js";
-import { useUtils } from "../useUtils.js";
+import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { adjustSectionValue, getSectionOrder } from "./useField.utils.js";
 import { useFieldState } from "./useFieldState.js";
 import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
@@ -19,7 +19,8 @@ export const useField = params => {
       minutesStep,
       enableAccessibleFieldDOMStructure = true,
       disabled = false,
-      readOnly = false
+      readOnly = false,
+      autoFocus = false
     },
     forwardedProps: {
       onKeyDown,
@@ -29,7 +30,8 @@ export const useField = params => {
     },
     fieldValueManager,
     valueManager,
-    validator
+    validator,
+    getOpenPickerButtonAriaLabel: getOpenDialogAriaText
   } = params;
   const isRtl = useRtl();
   const stateResponse = useFieldState(params);
@@ -141,6 +143,11 @@ export const useField = params => {
           if (readOnly || activeSectionIndex == null) {
             break;
           }
+
+          // if all sections are selected, mark the currently editing one as selected
+          if (parsedSelectedSections === 'all') {
+            setSelectedSections(activeSectionIndex);
+          }
           const activeSection = state.sections[activeSectionIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
           const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
@@ -216,9 +223,15 @@ export const useField = params => {
     error: inputError,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   };
+  const localizationContext = useLocalizationContext();
+  const openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText(_extends({}, localizationContext, {
+    value: state.value
+  })), [getOpenDialogAriaText, state.value, localizationContext]);
   const commonAdditionalProps = {
     disabled,
-    readOnly
+    readOnly,
+    autoFocus,
+    openPickerAriaLabel
   };
   return _extends({}, params.forwardedProps, commonForwardedProps, commonAdditionalProps, returnedValue);
 };

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

@@ -1,21 +1,25 @@
 import * as React from 'react';
-import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferError, PickerValueType } from '../../../models';
+import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferError, InferFieldSection, PickerValueType } from '../../../models';
 import type { PickerValueManager } from '../usePicker';
 import type { Validator } from '../../../validation';
 import type { UseFieldStateResponse } from './useFieldState';
 import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing';
 import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList';
-import { ExportedUseClearableFieldProps } from '../../../hooks/useClearableField';
-import { FormProps } from '../../models';
-export interface UseFieldParams<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any>> {
+import { FormProps, InferNonNullablePickerValue, PickerValidValue } from '../../models';
+import type { ExportedPickerFieldUIProps } from '../../components/PickerFieldUI';
+import { UseLocalizationContextReturnValue } from '../useUtils';
+export interface UseFieldParams<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any>> {
     forwardedProps: TForwardedProps;
     internalProps: TInternalProps;
     valueManager: PickerValueManager<TValue, InferError<TInternalProps>>;
-    fieldValueManager: FieldValueManager<TValue, TSection>;
+    fieldValueManager: FieldValueManager<TValue>;
     validator: Validator<TValue, InferError<TInternalProps>, TInternalProps>;
     valueType: PickerValueType;
+    getOpenPickerButtonAriaLabel: (parameters: UseLocalizationContextReturnValue & {
+        value: TValue;
+    }) => string;
 }
-export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps, FormProps, OnErrorProps<TValue, TError> {
+export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps, FormProps, OnErrorProps<TValue, TError> {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -50,10 +54,10 @@ export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TE
      */
     formatDensity?: 'dense' | 'spacious';
     /**
-     * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-     * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+     * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+     * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
      *
-     * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+     * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
      *
      * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
      * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
@@ -82,7 +86,7 @@ export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TE
     /**
      * The ref object used to imperatively interact with the field.
      */
-    unstableFieldRef?: React.Ref<FieldRef<TSection>>;
+    unstableFieldRef?: React.Ref<FieldRef<TValue>>;
     /**
      * @default true
      */
@@ -93,9 +97,13 @@ export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TE
      */
     autoFocus?: boolean;
 }
-export interface UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any, any>, 'disabled' | 'readOnly'>> {
+export interface UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any>, 'disabled' | 'readOnly' | 'autoFocus'>> {
+    /**
+     * The aria label to set on the button that opens the picker.
+     */
+    openPickerAriaLabel: string;
 }
-export interface UseFieldCommonForwardedProps extends ExportedUseClearableFieldProps {
+export interface UseFieldCommonForwardedProps extends Pick<ExportedPickerFieldUIProps, 'clearable' | 'onClear'> {
     onKeyDown?: React.KeyboardEventHandler;
     error?: boolean;
 }
@@ -113,7 +121,6 @@ interface UseFieldV6AdditionalProps extends Required<Pick<React.InputHTMLAttribu
 }
 export interface UseFieldV7ForwardedProps {
     focused?: boolean;
-    autoFocus?: boolean;
     sectionListRef?: React.Ref<PickersSectionListRef>;
     onBlur?: () => void;
     onClick?: React.MouseEventHandler;
@@ -152,7 +159,7 @@ export type FieldSectionsBoundaries = {
         maximum: number;
     };
 };
-export type FieldChangeHandler<TValue, TError> = (value: TValue, context: FieldChangeHandlerContext<TError>) => void;
+export type FieldChangeHandler<TValue extends PickerValidValue, TError> = (value: TValue, context: FieldChangeHandlerContext<TError>) => void;
 export interface FieldChangeHandlerContext<TError> {
     validationError: TError;
 }
@@ -160,7 +167,7 @@ export interface FieldChangeHandlerContext<TError> {
  * Object used to access and update the active date (i.e: the date containing the active section).
  * Mainly useful in the range fields where we need to update the date containing the active section without impacting the other one.
  */
-interface FieldActiveDateManager<TValue, TSection extends FieldSection> {
+interface FieldActiveDateManager<TValue extends PickerValidValue> {
     /**
      * Active date from `state.value`.
      */
@@ -170,87 +177,87 @@ interface FieldActiveDateManager<TValue, TSection extends FieldSection> {
      */
     referenceDate: PickerValidDate;
     /**
-     * @template TSection
-     * @param  {TSection[]} sections The sections of the full value.
-     * @returns {TSection[]} The sections of the active date.
+     * @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  {InferFieldSection<TValue>[]} sections The sections of the full value.
+     * @returns {InferFieldSection<TValue>[]} The sections of the active date.
      * Get the sections of the active date.
      */
-    getSections: (sections: TSection[]) => TSection[];
+    getSections: (sections: InferFieldSection<TValue>[]) => InferFieldSection<TValue>[];
     /**
      * Creates the new value and reference value based on the new active date and the current state.
-     * @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 {PickerValidDate | null} newActiveDate The new value of the date containing the active section.
-     * @returns {Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>} The new value and reference value to publish and store in the state.
+     * @returns {Pick<UseFieldState<TValue>, 'value' | 'referenceValue'>} The new value and reference value to publish and store in the state.
      */
-    getNewValuesFromNewActiveDate: (newActiveDate: PickerValidDate | null) => Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>;
+    getNewValuesFromNewActiveDate: (newActiveDate: PickerValidDate | null) => Pick<UseFieldState<TValue>, 'value' | 'referenceValue'>;
 }
 export type FieldParsedSelectedSections = number | 'all' | null;
-export interface FieldValueManager<TValue, TSection extends FieldSection> {
+export interface FieldValueManager<TValue extends PickerValidValue> {
     /**
      * Creates the section list from the current value.
      * The `prevSections` are used on the range fields to avoid losing the sections of a partially filled date when editing the other date.
-     * @template TValue, TSection
+     * @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 to generate sections from.
-     * @param {TSection[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid.
+     * @param {InferFieldSection<TValue>[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid.
      * @param {(date: PickerValidDate) => FieldSection[]} getSectionsFromDate Returns the sections of the given date.
-     * @returns {TSection[]}  The new section list.
+     * @returns {InferFieldSection<TValue>[]}  The new section list.
      */
-    getSectionsFromValue: (utils: MuiPickersAdapter, value: TValue, fallbackSections: TSection[] | null, getSectionsFromDate: (date: PickerValidDate) => FieldSection[]) => TSection[];
+    getSectionsFromValue: (utils: MuiPickersAdapter, value: TValue, fallbackSections: InferFieldSection<TValue>[] | null, getSectionsFromDate: (date: PickerValidDate) => FieldSection[]) => InferFieldSection<TValue>[];
     /**
      * Creates the string value to render in the input based on the current section list.
-     * @template TSection
-     * @param {TSection[]} sections The current section list.
+     * @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 {InferFieldSection<TValue>[]} sections The current section list.
      * @param {string} localizedDigits The conversion table from localized to 0-9 digits.
      * @param {boolean} isRtl `true` if the current orientation is "right to left"
      * @returns {string} The string value to render in the input.
      */
-    getV6InputValueFromSections: (sections: TSection[], localizedDigits: string[], isRtl: boolean) => string;
+    getV6InputValueFromSections: (sections: InferFieldSection<TValue>[], localizedDigits: string[], isRtl: boolean) => string;
     /**
      * Creates the string value to render in the input based on the current section list.
-     * @template TSection
-     * @param {TSection[]} sections The current section list.
+     * @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 {InferFieldSection<TValue>[]} sections The current section list.
      * @returns {string} The string value to render in the input.
      */
-    getV7HiddenInputValueFromSections: (sections: TSection[]) => string;
+    getV7HiddenInputValueFromSections: (sections: InferFieldSection<TValue>[]) => string;
     /**
      * Returns the manager of the active date.
-     * @template TValue, TSection
+     * @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 {UseFieldState<TValue, TSection>} state The current state of the field.
-     * @param {TSection} activeSection The active section.
-     * @returns {FieldActiveDateManager<TValue, TSection>} The manager of the active date.
+     * @param {UseFieldState<TValue>} state The current state of the field.
+     * @param {InferFieldSection<TValue>} activeSection The active section.
+     * @returns {FieldActiveDateManager<TValue>} The manager of the active date.
      */
-    getActiveDateManager: (utils: MuiPickersAdapter, state: UseFieldState<TValue, TSection>, activeSection: TSection) => FieldActiveDateManager<TValue, TSection>;
+    getActiveDateManager: (utils: MuiPickersAdapter, state: UseFieldState<TValue>, activeSection: InferFieldSection<TValue>) => FieldActiveDateManager<TValue>;
     /**
      * Parses a string version (most of the time coming from the input).
      * This method should only be used when the change does not come from a single section.
-     * @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 {string} valueStr The string value to parse.
      * @param {TValue} referenceValue The reference value currently stored in state.
      * @param {(dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null} parseDate A method to convert a string date into a parsed one.
      * @returns {TValue} The new parsed value.
      */
-    parseValueStr: (valueStr: string, referenceValue: TValue, parseDate: (dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null) => TValue;
+    parseValueStr: (valueStr: string, referenceValue: InferNonNullablePickerValue<TValue>, parseDate: (dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null) => TValue;
     /**
      * Update the reference value with the new value.
      * This method must make sure that no date inside the returned `referenceValue` is invalid.
-     * @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 new value from which we want to take all valid dates in the `referenceValue` state.
      * @param {TValue} prevReferenceValue The previous reference value. It is used as a fallback for invalid dates in the new value.
      * @returns {TValue} The new reference value with no invalid date.
      */
-    updateReferenceValue: (utils: MuiPickersAdapter, value: TValue, prevReferenceValue: TValue) => TValue;
+    updateReferenceValue: (utils: MuiPickersAdapter, value: TValue, prevReferenceValue: InferNonNullablePickerValue<TValue>) => InferNonNullablePickerValue<TValue>;
 }
-export interface UseFieldState<TValue, TSection extends FieldSection> {
+export interface UseFieldState<TValue extends PickerValidValue> {
     value: TValue;
     /**
      * Non-nullable value used to keep trace of the timezone and the date parts not present in the format.
      * It is updated whenever we have a valid date (for the range picker we update only the portion of the range that is valid).
      */
-    referenceValue: TValue;
-    sections: TSection[];
+    referenceValue: InferNonNullablePickerValue<TValue>;
+    sections: InferFieldSection<TValue>[];
     /**
      * Android `onChange` behavior when the input selection is not empty is quite different from a desktop behavior.
      * There are two `onChange` calls:
@@ -317,13 +324,13 @@ export interface UseFieldTextFieldInteractions {
     setSelectedSections: (newSelectedSections: FieldSelectedSections) => void;
     isFieldFocused: () => boolean;
 }
-export type UseFieldTextField<TEnableAccessibleFieldDOMStructure extends boolean> = <TValue, TSection extends FieldSection, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any> & {
+export type UseFieldTextField<TEnableAccessibleFieldDOMStructure extends boolean> = <TValue extends PickerValidValue, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any> & {
     minutesStep?: number;
-}>(params: UseFieldTextFieldParams<TValue, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => {
+}>(params: UseFieldTextFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => {
     interactions: UseFieldTextFieldInteractions;
     returnedValue: TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6AdditionalProps & Required<UseFieldV6ForwardedProps> : UseFieldV7AdditionalProps & Required<UseFieldV7ForwardedProps>;
 };
-interface UseFieldTextFieldParams<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any>> extends UseFieldParams<TValue, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>, UseFieldStateResponse<TValue, TSection>, UseFieldCharacterEditingResponse {
+interface UseFieldTextFieldParams<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any>> extends UseFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>, UseFieldStateResponse<TValue>, UseFieldCharacterEditingResponse {
     areAllSectionsEmpty: boolean;
     sectionOrder: SectionOrdering;
 }