@mui/x-date-pickers 8.0.0-beta.0 → 8.0.0-beta.1

package/esm/internals/hooks/useField/useFieldV7TextField.js

@@ -1,120 +1,139 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useTimeout from '@mui/utils/useTimeout';
 import useId from '@mui/utils/useId';
 import { getSectionValueNow, getSectionValueText, parseSelectedSections } from "./useField.utils.js";
 import { getActiveElement } from "../../utils/utils.js";
+import { useSplitFieldProps } from "../../../hooks/index.js";
 import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
 import { useUtils } from "../useUtils.js";
-export const useFieldV7TextField = params => {
+import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
+import { useFieldRootHandleKeyDown } from "./useFieldRootHandleKeyDown.js";
+import { useFieldState } from "./useFieldState.js";
+import { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";
+export const useFieldV7TextField = parameters => {
+  const translations = usePickerTranslations();
+  const utils = useUtils();
+  const id = useId();
   const {
-    internalProps: {
-      disabled,
-      readOnly = false,
-      autoFocus = false,
-      focused: focusedProp
-    },
-    forwardedProps: {
-      sectionListRef: inSectionListRef,
-      onBlur,
-      onClick,
-      onFocus,
-      onInput,
-      onPaste
-    },
-    fieldValueManager,
-    applyCharacterEditing,
-    resetCharacterQuery,
-    setSelectedSections,
+    props,
+    manager,
+    skipContextFieldRefAssignment,
+    manager: {
+      valueType,
+      internal_fieldValueManager: fieldValueManager,
+      internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
+    }
+  } = parameters;
+  const {
+    internalProps,
+    forwardedProps
+  } = useSplitFieldProps(props, valueType);
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps,
+    skipContextFieldRefAssignment
+  });
+  const {
+    sectionListRef: sectionListRefProp,
+    onBlur,
+    onClick,
+    onFocus,
+    onInput,
+    onPaste,
+    onKeyDown,
+    onClear,
+    clearable
+  } = forwardedProps;
+  const {
+    disabled = false,
+    readOnly = false,
+    autoFocus = false,
+    focused: focusedProp,
+    unstableFieldRef
+  } = internalPropsWithDefaults;
+  const sectionListRef = React.useRef(null);
+  const handleSectionListRef = useForkRef(sectionListRefProp, sectionListRef);
+  const stateResponse = useFieldState({
+    manager,
+    internalPropsWithDefaults,
+    forwardedProps
+  });
+  const {
+    // States and derived states
+    areAllSectionsEmpty,
+    error,
     parsedSelectedSections,
+    sectionOrder,
+    sectionsValueBoundaries,
     state,
-    clearActiveSection,
+    value,
+    // Methods to update the states
     clearValue,
+    clearActiveSection,
+    setCharacterQuery,
+    setSelectedSections,
     updateSectionValue,
-    updateValueFromValueStr,
-    sectionOrder,
-    areAllSectionsEmpty,
-    sectionsValueBoundaries
-  } = params;
-  const sectionListRef = React.useRef(null);
-  const handleSectionListRef = useForkRef(inSectionListRef, sectionListRef);
-  const translations = usePickerTranslations();
-  const utils = useUtils();
-  const id = useId();
+    updateValueFromValueStr
+  } = stateResponse;
+  const applyCharacterEditing = useFieldCharacterEditing({
+    stateResponse
+  });
+  const openPickerAriaLabel = useOpenPickerButtonAriaLabel(value);
   const [focused, setFocused] = React.useState(false);
-  const interactions = React.useMemo(() => ({
-    syncSelectionToDOM: () => {
-      if (!sectionListRef.current) {
-        return;
-      }
-      const selection = document.getSelection();
-      if (!selection) {
-        return;
+  function syncSelectionToDOM() {
+    if (!sectionListRef.current) {
+      return;
+    }
+    const selection = document.getSelection();
+    if (!selection) {
+      return;
+    }
+    if (parsedSelectedSections == null) {
+      // If the selection contains an element inside the field, we reset it.
+      if (selection.rangeCount > 0 && sectionListRef.current.getRoot().contains(selection.getRangeAt(0).startContainer)) {
+        selection.removeAllRanges();
       }
-      if (parsedSelectedSections == null) {
-        // If the selection contains an element inside the field, we reset it.
-        if (selection.rangeCount > 0 && sectionListRef.current.getRoot().contains(selection.getRangeAt(0).startContainer)) {
-          selection.removeAllRanges();
-        }
-        if (focused) {
-          sectionListRef.current.getRoot().blur();
-        }
-        return;
+      if (focused) {
+        sectionListRef.current.getRoot().blur();
       }
+      return;
+    }
 
-      // On multi input range pickers we want to update selection range only for the active input
-      if (!sectionListRef.current.getRoot().contains(getActiveElement(document))) {
-        return;
-      }
-      const range = new window.Range();
-      let target;
-      if (parsedSelectedSections === 'all') {
-        target = sectionListRef.current.getRoot();
+    // On multi input range pickers we want to update selection range only for the active input
+    if (!sectionListRef.current.getRoot().contains(getActiveElement(document))) {
+      return;
+    }
+    const range = new window.Range();
+    let target;
+    if (parsedSelectedSections === 'all') {
+      target = sectionListRef.current.getRoot();
+    } else {
+      const section = state.sections[parsedSelectedSections];
+      if (section.type === 'empty') {
+        target = sectionListRef.current.getSectionContainer(parsedSelectedSections);
       } else {
-        const section = state.sections[parsedSelectedSections];
-        if (section.type === 'empty') {
-          target = sectionListRef.current.getSectionContainer(parsedSelectedSections);
-        } else {
-          target = sectionListRef.current.getSectionContent(parsedSelectedSections);
-        }
-      }
-      range.selectNodeContents(target);
-      target.focus();
-      selection.removeAllRanges();
-      selection.addRange(range);
-    },
-    getActiveSectionIndexFromDOM: () => {
-      const activeElement = getActiveElement(document);
-      if (!activeElement || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement)) {
-        return null;
+        target = sectionListRef.current.getSectionContent(parsedSelectedSections);
       }
-      return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
-    },
-    focusField: (newSelectedSections = 0) => {
-      if (!sectionListRef.current ||
-      // if the field is already focused, we don't need to focus it again
-      interactions.getActiveSectionIndexFromDOM() != null) {
-        return;
-      }
-      const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
-      setFocused(true);
-      sectionListRef.current.getSectionContent(newParsedSelectedSections).focus();
-    },
-    setSelectedSections: newSelectedSections => {
-      if (!sectionListRef.current) {
-        return;
-      }
-      const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
-      const newActiveSectionIndex = newParsedSelectedSections === 'all' ? 0 : newParsedSelectedSections;
-      setFocused(newActiveSectionIndex !== null);
-      setSelectedSections(newSelectedSections);
-    },
-    isFieldFocused: () => {
-      const activeElement = getActiveElement(document);
-      return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement);
     }
-  }), [parsedSelectedSections, setSelectedSections, state.sections, focused]);
+    range.selectNodeContents(target);
+    target.focus();
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+  function focusField(newSelectedSections = 0) {
+    if (!sectionListRef.current ||
+    // if the field is already focused, we don't need to focus it again
+    getActiveSectionIndex(sectionListRef) != null) {
+      return;
+    }
+    const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
+    setFocused(true);
+    sectionListRef.current.getSectionContent(newParsedSelectedSections).focus();
+  }
 
   /**
    * If a section content has been updated with a value we don't want to keep,
@@ -126,8 +145,9 @@ export const useFieldV7TextField = params => {
     }
     const section = state.sections[sectionIndex];
     sectionListRef.current.getSectionContent(sectionIndex).innerHTML = section.value || section.placeholder;
-    interactions.syncSelectionToDOM();
+    syncSelectionToDOM();
   });
+  const containerClickTimeout = useTimeout();
   const handleContainerClick = useEventCallback((event, ...args) => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call of `handleContainerClick` is actually intended, or a side effect.
@@ -137,7 +157,7 @@ export const useFieldV7TextField = params => {
     setFocused(true);
     onClick?.(event, ...args);
     if (parsedSelectedSections === 'all') {
-      setTimeout(() => {
+      containerClickTimeout.start(0, () => {
         const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
         if (cursorPosition === 0) {
           setSelectedSections(sectionOrder.startIndex);
@@ -170,9 +190,8 @@ export const useFieldV7TextField = params => {
     const target = event.target;
     const keyPressed = target.textContent ?? '';
     sectionListRef.current.getRoot().innerHTML = state.sections.map(section => `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`).join('');
-    interactions.syncSelectionToDOM();
+    syncSelectionToDOM();
     if (keyPressed.length === 0 || keyPressed.charCodeAt(0) === 10) {
-      resetCharacterQuery();
       clearValue();
       setSelectedSections('all');
     } else if (keyPressed.length > 1) {
@@ -195,7 +214,7 @@ export const useFieldV7TextField = params => {
     }
     const pastedValue = event.clipboardData.getData('text');
     event.preventDefault();
-    resetCharacterQuery();
+    setCharacterQuery(null);
     updateValueFromValueStr(pastedValue);
   });
   const handleContainerFocus = useEventCallback(event => {
@@ -252,7 +271,7 @@ export const useFieldV7TextField = params => {
     const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
     const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
     if (isValidPastedValue) {
-      resetCharacterQuery();
+      setCharacterQuery(null);
       updateSectionValue({
         section: activeSection,
         newSectionValue: pastedValue,
@@ -261,7 +280,7 @@ export const useFieldV7TextField = params => {
     }
     // If the pasted value corresponds to a single section, but not the expected type, we skip the modification
     else if (!lettersOnly && !digitsOnly) {
-      resetCharacterQuery();
+      setCharacterQuery(null);
       updateValueFromValueStr(pastedValue);
     }
   });
@@ -291,7 +310,6 @@ export const useFieldV7TextField = params => {
         revertDOMSectionChange(sectionIndex);
         return;
       }
-      resetCharacterQuery();
       revertDOMSectionChange(sectionIndex);
       clearActiveSection();
       return;
@@ -304,33 +322,35 @@ export const useFieldV7TextField = params => {
     // The DOM value needs to remain the one React is expecting.
     revertDOMSectionChange(sectionIndex);
   });
-  useEnhancedEffect(() => {
-    if (!focused || !sectionListRef.current) {
-      return;
-    }
-    if (parsedSelectedSections === 'all') {
-      sectionListRef.current.getRoot().focus();
-    } else if (typeof parsedSelectedSections === 'number') {
-      const domElement = sectionListRef.current.getSectionContent(parsedSelectedSections);
-      if (domElement) {
-        domElement.focus();
-      }
+  const handleClear = useEventCallback((event, ...args) => {
+    event.preventDefault();
+    onClear?.(event, ...args);
+    clearValue();
+    if (!isFieldFocused(sectionListRef)) {
+      // setSelectedSections is called internally
+      focusField(0);
+    } else {
+      setSelectedSections(sectionOrder.startIndex);
     }
-  }, [parsedSelectedSections, focused]);
-  const sectionBoundaries = React.useMemo(() => {
-    return state.sections.reduce((acc, next) => {
-      acc[next.type] = sectionsValueBoundaries[next.type]({
-        currentDate: null,
-        contentType: next.contentType,
-        format: next.format
-      });
-      return acc;
-    }, {});
-  }, [sectionsValueBoundaries, state.sections]);
+  });
+  const handleContainerKeyDown = useFieldRootHandleKeyDown({
+    manager,
+    internalPropsWithDefaults,
+    stateResponse
+  });
+  const wrappedHandleContainerKeyDown = useEventCallback(event => {
+    onKeyDown?.(event);
+    handleContainerKeyDown(event);
+  });
   const isContainerEditable = parsedSelectedSections === 'all';
   const elements = React.useMemo(() => {
     return state.sections.map((section, index) => {
       const isEditable = !isContainerEditable && !disabled && !readOnly;
+      const sectionBoundaries = sectionsValueBoundaries[section.type]({
+        currentDate: fieldValueManager.getDateFromSection(value, section),
+        contentType: section.contentType,
+        format: section.format
+      });
       return {
         container: {
           'data-sectionindex': index,
@@ -344,8 +364,8 @@ export const useFieldV7TextField = params => {
           'aria-labelledby': `${id}-${section.type}`,
           'aria-readonly': readOnly,
           'aria-valuenow': getSectionValueNow(section, utils),
-          'aria-valuemin': sectionBoundaries[section.type].minimum,
-          'aria-valuemax': sectionBoundaries[section.type].maximum,
+          'aria-valuemin': sectionBoundaries.minimum,
+          'aria-valuemax': sectionBoundaries.maximum,
           'aria-valuetext': section.value ? getSectionValueText(section, utils) : translations.empty,
           'aria-label': translations[section.type],
           'aria-disabled': disabled,
@@ -369,7 +389,7 @@ export const useFieldV7TextField = params => {
         }
       };
     });
-  }, [state.sections, getInputContentFocusHandler, handleInputContentPaste, handleInputContentDragOver, handleInputContentInput, getInputContainerClickHandler, handleInputContentMouseUp, disabled, readOnly, isContainerEditable, translations, utils, sectionBoundaries, id]);
+  }, [disabled, fieldValueManager, getInputContainerClickHandler, getInputContentFocusHandler, handleInputContentDragOver, handleInputContentInput, handleInputContentMouseUp, handleInputContentPaste, id, isContainerEditable, readOnly, sectionsValueBoundaries, state.sections, translations, utils, value]);
   const handleValueStrChange = useEventCallback(event => {
     updateValueFromValueStr(event.target.value);
   });
@@ -383,28 +403,72 @@ export const useFieldV7TextField = params => {
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  return {
-    interactions,
-    returnedValue: {
-      // Forwarded
-      autoFocus,
-      readOnly,
-      focused: focusedProp ?? focused,
-      sectionListRef: handleSectionListRef,
-      onBlur: handleContainerBlur,
-      onClick: handleContainerClick,
-      onFocus: handleContainerFocus,
-      onInput: handleContainerInput,
-      onPaste: handleContainerPaste,
-      // Additional
-      enableAccessibleFieldDOMStructure: true,
-      elements,
-      // TODO v7: Try to set to undefined when there is a section selected.
-      tabIndex: parsedSelectedSections === 0 ? -1 : 0,
-      contentEditable: isContainerEditable,
-      value: valueStr,
-      onChange: handleValueStrChange,
-      areAllSectionsEmpty
+  useEnhancedEffect(() => {
+    if (!focused || !sectionListRef.current) {
+      return;
+    }
+    if (parsedSelectedSections === 'all') {
+      sectionListRef.current.getRoot().focus();
+    } else if (typeof parsedSelectedSections === 'number') {
+      const domElement = sectionListRef.current.getSectionContent(parsedSelectedSections);
+      if (domElement) {
+        domElement.focus();
+      }
     }
-  };
-};
+  }, [parsedSelectedSections, focused]);
+  useEnhancedEffect(() => {
+    syncSelectionToDOM();
+  });
+  React.useImperativeHandle(unstableFieldRef, () => ({
+    getSections: () => state.sections,
+    getActiveSectionIndex: () => getActiveSectionIndex(sectionListRef),
+    setSelectedSections: newSelectedSections => {
+      if (!sectionListRef.current) {
+        return;
+      }
+      const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
+      const newActiveSectionIndex = newParsedSelectedSections === 'all' ? 0 : newParsedSelectedSections;
+      setFocused(newActiveSectionIndex !== null);
+      setSelectedSections(newSelectedSections);
+    },
+    focusField,
+    isFieldFocused: () => isFieldFocused(sectionListRef)
+  }));
+  return _extends({}, forwardedProps, {
+    error,
+    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled),
+    focused: focusedProp ?? focused,
+    sectionListRef: handleSectionListRef,
+    onBlur: handleContainerBlur,
+    onClick: handleContainerClick,
+    onFocus: handleContainerFocus,
+    onInput: handleContainerInput,
+    onPaste: handleContainerPaste,
+    onKeyDown: wrappedHandleContainerKeyDown,
+    onClear: handleClear,
+    // Additional
+    enableAccessibleFieldDOMStructure: true,
+    elements,
+    // TODO v7: Try to set to undefined when there is a section selected.
+    tabIndex: parsedSelectedSections === 0 ? -1 : 0,
+    contentEditable: isContainerEditable,
+    value: valueStr,
+    onChange: handleValueStrChange,
+    areAllSectionsEmpty,
+    disabled,
+    readOnly,
+    autoFocus,
+    openPickerAriaLabel
+  });
+};
+function getActiveSectionIndex(sectionListRef) {
+  const activeElement = getActiveElement(document);
+  if (!activeElement || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement)) {
+    return null;
+  }
+  return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
+}
+function isFieldFocused(sectionListRef) {
+  const activeElement = getActiveElement(document);
+  return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement);
+}

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

@@ -89,6 +89,7 @@ export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextV
   format?: string;
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker?: boolean;

package/esm/internals/index.d.ts

@@ -26,7 +26,7 @@ export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDT
 export { useControlledValue } from "./hooks/useControlledValue.js";
 export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker';
 export { useField, useFieldInternalPropsWithDefaults, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.js";
-export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from './hooks/useField';
+export type { UseFieldInternalProps, UseFieldParameters, UseFieldReturnValue, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from './hooks/useField';
 export { useFieldOwnerState } from "./hooks/useFieldOwnerState.js";
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { useNullableFieldPrivateContext } from "./hooks/useNullableFieldPrivateContext.js";
@@ -65,6 +65,7 @@ export type { DayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, Exported
 export type { ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
 export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.js";
+export { usePickerDayOwnerState } from "../PickersDay/usePickerDayOwnerState.js";
 export { getDateFieldInternalPropsDefaults } from "../managers/useDateManager.js";
 export { getTimeFieldInternalPropsDefaults } from "../managers/useTimeManager.js";
 export { getDateTimeFieldInternalPropsDefaults } from "../managers/useDateTimeManager.js";

package/esm/internals/index.js

@@ -33,6 +33,7 @@ export { applyDefaultViewProps } from "./utils/views.js";
 export { DayCalendar } from "../DateCalendar/DayCalendar.js";
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
 export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.js";
+export { usePickerDayOwnerState } from "../PickersDay/usePickerDayOwnerState.js";
 export { getDateFieldInternalPropsDefaults } from "../managers/useDateManager.js";
 export { getTimeFieldInternalPropsDefaults } from "../managers/useTimeManager.js";
 export { getDateTimeFieldInternalPropsDefaults } from "../managers/useDateTimeManager.js";

package/esm/managers/useDateManager.js

@@ -29,13 +29,13 @@ export function useDateManager(parameters = {}) {
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure]);
 }
-function useOpenPickerButtonAriaLabel() {
+function useOpenPickerButtonAriaLabel(value) {
   const utils = useUtils();
   const translations = usePickerTranslations();
-  return React.useCallback(value => {
+  return React.useMemo(() => {
     const formattedValue = utils.isValid(value) ? utils.format(value, 'fullDate') : null;
     return translations.openDatePickerDialogue(formattedValue);
-  }, [translations, utils]);
+  }, [value, translations, utils]);
 }
 
 /**

package/esm/managers/useDateTimeManager.js

@@ -29,13 +29,13 @@ export function useDateTimeManager(parameters = {}) {
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure]);
 }
-function useOpenPickerButtonAriaLabel() {
+function useOpenPickerButtonAriaLabel(value) {
   const utils = useUtils();
   const translations = usePickerTranslations();
-  return React.useCallback(value => {
+  return React.useMemo(() => {
     const formattedValue = utils.isValid(value) ? utils.format(value, 'fullDate') : null;
     return translations.openDatePickerDialogue(formattedValue);
-  }, [translations, utils]);
+  }, [value, translations, utils]);
 }
 
 /**

package/esm/managers/useTimeManager.js

@@ -28,14 +28,14 @@ export function useTimeManager(parameters = {}) {
   }), [ampm, enableAccessibleFieldDOMStructure]);
 }
 function createUseOpenPickerButtonAriaLabel(ampm) {
-  return function useOpenPickerButtonAriaLabel() {
+  return function useOpenPickerButtonAriaLabel(value) {
     const utils = useUtils();
     const translations = usePickerTranslations();
-    return React.useCallback(value => {
+    return React.useMemo(() => {
       const formatKey = ampm ?? utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h';
       const formattedValue = utils.isValid(value) ? utils.format(value, formatKey) : null;
       return translations.openTimePickerDialogue(formattedValue);
-    }, [translations, utils]);
+    }, [value, translations, utils]);
   };
 }
 

package/esm/models/fields.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import type { ExportedPickersSectionListProps } from '../PickersSectionList';
-import type { UseFieldInternalProps, UseFieldResponse } from '../internals/hooks/useField';
+import type { UseFieldInternalProps, UseFieldReturnValue } from '../internals/hooks/useField';
 import type { PickersTextFieldProps } from '../PickersTextField';
 import { BaseSingleInputFieldProps, FieldRangeSection, PickerRangeValue, PickerValidValue } from "../internals/models/index.js";
 import { PickerOwnerState } from "./pickers.js";
@@ -131,7 +131,7 @@ export type PickerFieldSlotProps<TValue extends PickerValidValue, TEnableAccessi
  * Props the text field receives when used inside a single input Picker.
  * Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.field` and `props.slotProps.textField`.
  */
-export type BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = Omit<UseFieldResponse<TEnableAccessibleFieldDOMStructure, BaseSingleInputFieldProps>, 'slots' | 'slotProps' | 'clearable' | 'onClear' | 'openPickerButtonPosition' | 'clearButtonPosition' | 'openPickerAriaLabel'>;
+export type BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = Omit<UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, BaseSingleInputFieldProps>, 'slots' | 'slotProps' | 'clearable' | 'onClear' | 'openPickerButtonPosition' | 'clearButtonPosition' | 'openPickerAriaLabel'>;
 /**
  * Props the built-in text field component can receive.
  */

package/esm/models/manager.d.ts

@@ -72,9 +72,10 @@ export interface PickerManager<TValue extends PickerValidValue, TEnableAccessibl
   internal_applyDefaultsToFieldInternalProps: (parameters: ApplyDefaultsToFieldInternalPropsParameters<TFieldInternalProps>) => UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, TError> & TValidationProps;
   /**
    * Returns a hook that creates the aria-label to apply on the button that opens the Picker.
-   * @returns {(value: TValue) => string} The method to create the aria-label to apply on the button that opens the Picker.
+   * @param {TValue} value The value of the Picker.
+   * @returns {string} The aria-label to apply on the button that opens the Picker.
    */
-  internal_useOpenPickerButtonAriaLabel: () => (value: TValue) => string;
+  internal_useOpenPickerButtonAriaLabel: (value: TValue) => string;
 }
 interface ApplyDefaultsToFieldInternalPropsParameters<TFieldInternalProps extends {}> extends UseLocalizationContextReturnValue {
   internalProps: TFieldInternalProps;

package/hooks/useSplitFieldProps.d.ts

@@ -1,7 +1,7 @@
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.js";
 import { PickerValueType } from "../models/common.js";
 declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "unstableStartFieldRef", "unstableEndFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
-type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
+export type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
 /**
  * Split the props received by the field component into:
  * - `internalProps` which are used by the various hooks called by the field component.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-beta.0
+ * @mui/x-date-pickers v8.0.0-beta.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickerFieldUI.d.ts

@@ -6,9 +6,9 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
 import { MakeOptional, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { FieldOwnerState } from "../../models/index.js";
 import { UseFieldOwnerStateParameters } from "../hooks/useFieldOwnerState.js";
-import type { UseFieldResponse } from '../hooks/useField';
+import type { UseFieldReturnValue, UseFieldProps } from '../hooks/useField';
 import { PickersTextFieldProps } from "../../PickersTextField/index.js";
-export declare const cleanFieldResponse: <TFieldResponse extends MakeOptional<UseFieldResponse<any, ExportedPickerFieldUIProps & {
+export declare const cleanFieldResponse: <TFieldResponse extends MakeOptional<UseFieldReturnValue<any, ExportedPickerFieldUIProps & {
   [key: string]: any;
 }>, "onClear" | "clearable">>({
   enableAccessibleFieldDOMStructure,
@@ -22,7 +22,7 @@ export declare const PickerFieldUIContext: React.Context<PickerFieldUIContextVal
  * Adds the button to open the Picker and the button to clear the value of the field.
  * @ignore - internal component.
  */
-export declare function PickerFieldUI(props: PickerFieldUIProps): React.JSX.Element;
+export declare function PickerFieldUI<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(props: PickerFieldUIProps<TEnableAccessibleFieldDOMStructure, TProps>): React.JSX.Element;
 export interface ExportedPickerFieldUIProps {
   /**
    * If `true`, a clear button will be shown in the field allowing value clearing.
@@ -46,7 +46,7 @@ export interface ExportedPickerFieldUIProps {
    */
   openPickerButtonPosition?: 'start' | 'end';
 }
-export interface PickerFieldUIProps {
+export interface PickerFieldUIProps<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> {
   /**
    * Overridable component slots.
    * @default {}
@@ -60,7 +60,7 @@ export interface PickerFieldUIProps {
   /**
    * Object returned by the `useField` hook or one of its wrapper (for example `useDateField`).
    */
-  fieldResponse: UseFieldResponse<any, any>;
+  fieldResponse: UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;
   /**
    * The component to use to render the Picker opening icon if none is provided in the Picker's slots.
    */