@mui/x-date-pickers 8.0.0-alpha.7 → 8.0.0-alpha.9

package/node/internals/hooks/useField/index.js

@@ -24,8 +24,9 @@ Object.defineProperty(exports, "useField", {
 Object.defineProperty(exports, "useFieldInternalPropsWithDefaults", {
   enumerable: true,
   get: function () {
-    return _useField.useFieldInternalPropsWithDefaults;
+    return _useFieldInternalPropsWithDefaults.useFieldInternalPropsWithDefaults;
   }
 });
 var _useField = require("./useField");
-var _useField2 = require("./useField.utils");
+var _useField2 = require("./useField.utils");
+var _useFieldInternalPropsWithDefaults = require("./useFieldInternalPropsWithDefaults");

package/node/internals/hooks/useField/useField.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFieldInternalPropsWithDefaults = exports.useField = void 0;
+exports.useField = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
@@ -18,23 +18,6 @@ var _useFieldState = require("./useFieldState");
 var _useFieldCharacterEditing = require("./useFieldCharacterEditing");
 var _useFieldV7TextField = require("./useFieldV7TextField");
 var _useFieldV6TextField = require("./useFieldV6TextField");
-/**
- * Applies the default values to the field internal props.
- * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
- * It is only here to allow the migration to be done in smaller steps.
- */
-const useFieldInternalPropsWithDefaults = ({
-  manager,
-  internalProps
-}) => {
-  const localizationContext = (0, _useUtils.useLocalizationContext)();
-  return React.useMemo(() => {
-    return manager.internal_applyDefaultsToFieldInternalProps((0, _extends2.default)({}, localizationContext, {
-      internalProps
-    }));
-  }, [manager, internalProps, localizationContext]);
-};
-exports.useFieldInternalPropsWithDefaults = useFieldInternalPropsWithDefaults;
 const useField = params => {
   const utils = (0, _useUtils.useUtils)();
   const {
@@ -44,7 +27,8 @@ const useField = params => {
       minutesStep,
       enableAccessibleFieldDOMStructure = true,
       disabled = false,
-      readOnly = false
+      readOnly = false,
+      autoFocus = false
     },
     forwardedProps: {
       onKeyDown,
@@ -54,7 +38,8 @@ const useField = params => {
     },
     fieldValueManager,
     valueManager,
-    validator
+    validator,
+    getOpenPickerButtonAriaLabel: getOpenDialogAriaText
   } = params;
   const isRtl = (0, _RtlProvider.useRtl)();
   const stateResponse = (0, _useFieldState.useFieldState)(params);
@@ -166,6 +151,11 @@ 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 = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
@@ -241,9 +231,15 @@ const useField = params => {
     error: inputError,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   };
+  const localizationContext = (0, _useUtils.useLocalizationContext)();
+  const openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText((0, _extends2.default)({}, localizationContext, {
+    value: state.value
+  })), [getOpenDialogAriaText, state.value, localizationContext]);
   const commonAdditionalProps = {
     disabled,
-    readOnly
+    readOnly,
+    autoFocus,
+    openPickerAriaLabel
   };
   return (0, _extends2.default)({}, params.forwardedProps, commonForwardedProps, commonAdditionalProps, returnedValue);
 };

package/node/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerFieldPrivateContext = void 0;
+exports.useFieldInternalPropsWithDefaults = useFieldInternalPropsWithDefaults;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useUtils = require("../useUtils");
+var _useNullablePickerContext = require("../useNullablePickerContext");
+const PickerFieldPrivateContext = exports.PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Applies the default values to the field internal props.
+ * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
+ * It is only here to allow the migration to be done in smaller steps.
+ */
+function useFieldInternalPropsWithDefaults({
+  manager,
+  internalProps
+}) {
+  const localizationContext = (0, _useUtils.useLocalizationContext)();
+  const pickerContext = (0, _useNullablePickerContext.useNullablePickerContext)();
+  const fieldPrivateContext = React.useContext(PickerFieldPrivateContext);
+  const setValue = pickerContext?.setValue;
+  const handleChangeFromPicker = React.useCallback((newValue, ctx) => {
+    return setValue?.(newValue, {
+      validationError: ctx.validationError
+    });
+  }, [setValue]);
+  return React.useMemo(() => {
+    let internalPropsWithDefaultsFromContext = internalProps;
+    // If one of the context is null,
+    // Then the field is used as a standalone component and the other context will be null as well.
+    if (fieldPrivateContext != null && pickerContext != null) {
+      internalPropsWithDefaultsFromContext = (0, _extends2.default)({
+        value: pickerContext.value,
+        onChange: handleChangeFromPicker,
+        timezone: pickerContext.timezone,
+        disabled: pickerContext.disabled,
+        format: pickerContext.fieldFormat,
+        formatDensity: fieldPrivateContext.formatDensity,
+        enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
+        selectedSections: fieldPrivateContext.selectedSections,
+        onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange
+      }, internalProps);
+    }
+    return manager.internal_applyDefaultsToFieldInternalProps((0, _extends2.default)({}, localizationContext, {
+      internalProps: internalPropsWithDefaultsFromContext
+    }));
+  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker]);
+}

package/node/internals/hooks/useField/useFieldV6TextField.js

@@ -246,6 +246,9 @@ const useFieldV6TextField = params => {
     const shouldUseEventData = eventData && eventData.length > 1;
     const valueStr = shouldUseEventData ? eventData : targetValue;
     const cleanValueStr = cleanString(valueStr);
+    if (parsedSelectedSections === 'all') {
+      setSelectedSections(activeSectionIndex);
+    }
 
     // If no section is selected or eventData should be used, we just try to parse the new value
     // This line is mostly triggered by imperative code / application tests.

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

@@ -19,7 +19,8 @@ const useFieldV7TextField = params => {
   const {
     internalProps: {
       disabled,
-      readOnly = false
+      readOnly = false,
+      autoFocus = false
     },
     forwardedProps: {
       sectionListRef: inSectionListRef,
@@ -28,8 +29,7 @@ const useFieldV7TextField = params => {
       onFocus,
       onInput,
       onPaste,
-      focused: focusedProp,
-      autoFocus = false
+      focused: focusedProp
     },
     fieldValueManager,
     applyCharacterEditing,
@@ -184,6 +184,9 @@ const useFieldV7TextField = params => {
     } else if (keyPressed.length > 1) {
       updateValueFromValueStr(keyPressed);
     } else {
+      if (parsedSelectedSections === 'all') {
+        setSelectedSections(0);
+      }
       applyCharacterEditing({
         keyPressed,
         sectionIndex: 0

package/node/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -14,11 +14,11 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _PickersModalDialog = require("../../components/PickersModalDialog");
 var _usePicker = require("../usePicker");
-var _utils = require("../../utils/utils");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
+var _PickerFieldUI = require("../../components/PickerFieldUI");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["props", "getOpenDialogAriaText"];
+const _excluded = ["props"];
 /**
  * Hook managing all the single-date mobile pickers:
  * - MobileDatePicker
@@ -27,8 +27,7 @@ const _excluded = ["props", "getOpenDialogAriaText"];
  */
 const useMobilePicker = _ref => {
   let {
-      props,
-      getOpenDialogAriaText
+      props
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
@@ -36,17 +35,11 @@ const useMobilePicker = _ref => {
     slotProps: innerSlotProps,
     className,
     sx,
-    format,
-    formatDensity,
-    enableAccessibleFieldDOMStructure,
-    selectedSections,
-    onSelectedSectionsChange,
-    timezone,
     name,
     label,
     inputRef,
     readOnly,
-    disabled,
+    autoFocus,
     localeText
   } = props;
   const fieldRef = React.useRef(null);
@@ -55,7 +48,6 @@ const useMobilePicker = _ref => {
   const {
     providerProps,
     renderCurrentView,
-    fieldProps: pickerFieldProps,
     ownerState
   } = (0, _usePicker.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
@@ -70,44 +62,21 @@ const useMobilePicker = _ref => {
     externalSlotProps: innerSlotProps?.field,
     additionalProps: (0, _extends2.default)({
       // Internal props
-      readOnly: readOnly ?? true,
-      disabled,
-      format,
-      formatDensity,
-      enableAccessibleFieldDOMStructure,
-      selectedSections,
-      onSelectedSectionsChange,
-      timezone
-    }, pickerFieldProps, {
-      // onChange and value
-
+      readOnly,
+      autoFocus: autoFocus && !props.open,
       // Forwarded props
       className,
       sx,
       label,
-      name
+      name,
+      focused: providerProps.contextValue.open ? true : undefined
     }, isToolbarHidden && {
       id: labelId
-    }, !(disabled || readOnly) && {
-      // These direct access to `providerProps` will go away in https://github.com/mui/mui-x/pull/15671
-      onClick: event => {
-        event.preventDefault();
-        providerProps.contextValue.setOpen(true);
-      },
-      onKeyDown: (0, _utils.onSpaceOrEnter)(() => providerProps.contextValue.setOpen(true))
     }, !!inputRef && {
       inputRef
     }),
     ownerState
   });
-
-  // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
-  fieldProps.inputProps = (0, _extends2.default)({}, fieldProps.inputProps, {
-    'aria-label': getOpenDialogAriaText(pickerFieldProps.value)
-  });
-  const slotsForField = (0, _extends2.default)({
-    textField: slots.textField
-  }, fieldProps.slots);
   const Layout = slots.layout ?? _PickersLayout.PickersLayout;
   let labelledById = labelId;
   if (isToolbarHidden) {
@@ -126,20 +95,22 @@ const useMobilePicker = _ref => {
     }, innerSlotProps?.mobilePaper)
   });
   const handleFieldRef = (0, _useForkRef.default)(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
-      slots: slotsForField,
-      slotProps: slotProps,
-      unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
+  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerFieldUI.PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
+        unstableFieldRef: handleFieldRef
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
         slots: slots,
         slotProps: slotProps,
-        children: renderCurrentView()
-      }))
-    })]
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
+          slots: slots,
+          slotProps: slotProps,
+          children: renderCurrentView()
+        }))
+      })]
+    })
   }));
   return {
     renderPicker

package/node/internals/hooks/useNullablePickerContext.js

@@ -0,0 +1,16 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNullablePickerContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _usePickerContext = require("../../hooks/usePickerContext");
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ * If the context is not found, returns `null`.
+ */
+const useNullablePickerContext = () => React.useContext(_usePickerContext.PickerContext);
+exports.useNullablePickerContext = useNullablePickerContext;

package/node/internals/hooks/usePicker/usePicker.js

@@ -46,11 +46,8 @@ const usePicker = ({
     paramsFromUsePickerViews: pickerViewsResponse.provider
   });
   return {
-    // Picker value
-    fieldProps: pickerValueResponse.fieldProps,
     // Picker views
     renderCurrentView: pickerViewsResponse.renderCurrentView,
-    hasUIView: pickerViewsResponse.provider.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker provider
     providerProps,

package/node/internals/hooks/usePicker/usePickerProvider.js

@@ -55,6 +55,7 @@ function usePickerProvider(parameters) {
   } = parameters;
   const utils = (0, _useUtils.useUtils)();
   const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
+  const triggerRef = React.useRef(null);
   const ownerState = React.useMemo(() => ({
     isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
     isPickerOpen: paramsFromUsePickerValue.contextValue.open,
@@ -63,21 +64,40 @@ function usePickerProvider(parameters) {
     pickerOrientation: orientation,
     pickerVariant: variant
   }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
+  const triggerStatus = React.useMemo(() => {
+    if (props.disableOpenPicker || !paramsFromUsePickerViews.hasUIView) {
+      return 'hidden';
+    }
+    if (props.disabled || props.readOnly) {
+      return 'disabled';
+    }
+    return 'enabled';
+  }, [props.disableOpenPicker, paramsFromUsePickerViews.hasUIView, props.disabled, props.readOnly]);
   const contextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, {
     disabled: props.disabled ?? false,
     readOnly: props.readOnly ?? false,
     variant,
-    orientation
-  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, variant, orientation, props.disabled, props.readOnly]);
+    orientation,
+    triggerRef,
+    triggerStatus,
+    fieldFormat: props.format ?? ''
+  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, variant, orientation, props.disabled, props.readOnly, triggerRef, triggerStatus, props.format]);
   const privateContextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.privateContextValue, {
     ownerState
   }), [paramsFromUsePickerValue, ownerState]);
   const actionsContextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue), [paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue]);
+  const fieldPrivateContextValue = React.useMemo(() => ({
+    formatDensity: props.formatDensity,
+    enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
+    selectedSections: props.selectedSections,
+    onSelectedSectionsChange: props.onSelectedSectionsChange
+  }), [props.formatDensity, props.enableAccessibleFieldDOMStructure, props.selectedSections, props.onSelectedSectionsChange]);
   return {
     localeText,
     contextValue,
     privateContextValue,
     actionsContextValue,
+    fieldPrivateContextValue,
     isValidContextValue: paramsFromUsePickerValue.isValidContextValue
   };
 }

package/node/internals/hooks/usePicker/usePickerValue.js

@@ -184,12 +184,6 @@ const usePickerValue = ({
       skipPublicationIfPristine: true
     });
   });
-  const fieldResponse = {
-    value: dateState.draft,
-    onChange: (newValue, context) => setValue(newValue, {
-      validationError: context.validationError
-    })
-  };
   const setValueFromView = (0, _useEventCallback.default)((newValue, selectionState = 'partial') => {
     // TODO: Expose a new method (private?) like `setView` that only updates the draft value.
     if (selectionState === 'shallow') {
@@ -218,21 +212,21 @@ const usePickerValue = ({
     cancelValueChanges
   }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
   const contextValue = React.useMemo(() => (0, _extends2.default)({}, actionsContextValue, {
-    open,
-    value: dateState.draft
-  }), [actionsContextValue, open, dateState.draft]);
+    value: dateState.draft,
+    timezone,
+    open
+  }), [actionsContextValue, timezone, open, dateState.draft]);
   const privateContextValue = React.useMemo(() => ({
     dismissViews
   }), [dismissViews]);
   const providerParams = {
-    value: valueWithoutError,
+    value: dateState.draft,
     contextValue,
     actionsContextValue,
     privateContextValue,
     isValidContextValue: isValid
   };
   return {
-    fieldProps: fieldResponse,
     viewProps: viewResponse,
     provider: providerParams
   };

package/node/internals/index.js

@@ -33,6 +33,18 @@ Object.defineProperty(exports, "DayCalendar", {
     return _DayCalendar.DayCalendar;
   }
 });
+Object.defineProperty(exports, "PickerFieldUI", {
+  enumerable: true,
+  get: function () {
+    return _PickerFieldUI.PickerFieldUI;
+  }
+});
+Object.defineProperty(exports, "PickerFieldUIContextProvider", {
+  enumerable: true,
+  get: function () {
+    return _PickerFieldUI.PickerFieldUIContextProvider;
+  }
+});
 Object.defineProperty(exports, "PickerProvider", {
   enumerable: true,
   get: function () {
@@ -93,10 +105,10 @@ Object.defineProperty(exports, "areDatesEqual", {
     return _dateUtils.areDatesEqual;
   }
 });
-Object.defineProperty(exports, "convertFieldResponseIntoMuiTextFieldProps", {
+Object.defineProperty(exports, "cleanFieldResponse", {
   enumerable: true,
   get: function () {
-    return _convertFieldResponseIntoMuiTextFieldProps.convertFieldResponseIntoMuiTextFieldProps;
+    return _PickerFieldUI.cleanFieldResponse;
   }
 });
 Object.defineProperty(exports, "createDateStrForV6InputFromSections", {
@@ -279,6 +291,12 @@ Object.defineProperty(exports, "useFieldOwnerState", {
     return _useFieldOwnerState.useFieldOwnerState;
   }
 });
+Object.defineProperty(exports, "useFieldTextFieldProps", {
+  enumerable: true,
+  get: function () {
+    return _PickerFieldUI.useFieldTextFieldProps;
+  }
+});
 Object.defineProperty(exports, "useLocalizationContext", {
   enumerable: true,
   get: function () {
@@ -340,6 +358,7 @@ Object.defineProperty(exports, "useViews", {
   }
 });
 var _PickersArrowSwitcher = require("./components/PickersArrowSwitcher/PickersArrowSwitcher");
+var _PickerFieldUI = require("./components/PickerFieldUI");
 var _PickerProvider = require("./components/PickerProvider");
 var _PickersModalDialog = require("./components/PickersModalDialog");
 var _PickersPopper = require("./components/PickersPopper");
@@ -361,7 +380,6 @@ var _useToolbarOwnerState = require("./hooks/useToolbarOwnerState");
 var _useUtils = require("./hooks/useUtils");
 var _useViews = require("./hooks/useViews");
 var _dateHelpersHooks = require("./hooks/date-helpers-hooks");
-var _convertFieldResponseIntoMuiTextFieldProps = require("./utils/convertFieldResponseIntoMuiTextFieldProps");
 var _dateUtils = require("./utils/date-utils");
 var _dateTimeUtils = require("./utils/date-time-utils");
 var _getDefaultReferenceDate = require("./utils/getDefaultReferenceDate");

package/node/locales/utils/getPickersLocalization.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPickersLocalization = exports.buildGetOpenDialogAriaText = void 0;
+exports.getPickersLocalization = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const getPickersLocalization = pickersTranslations => {
   return {
@@ -17,18 +17,4 @@ const getPickersLocalization = pickersTranslations => {
     }
   };
 };
-exports.getPickersLocalization = getPickersLocalization;
-const buildGetOpenDialogAriaText = params => {
-  const {
-    utils,
-    formatKey,
-    contextTranslation,
-    propsTranslation
-  } = params;
-  return value => {
-    const formattedValue = utils.isValid(value) ? utils.format(value, formatKey) : null;
-    const translation = propsTranslation ?? contextTranslation;
-    return translation(formattedValue);
-  };
-};
-exports.buildGetOpenDialogAriaText = buildGetOpenDialogAriaText;
+exports.getPickersLocalization = getPickersLocalization;

package/node/managers/useDateManager.js

@@ -31,7 +31,15 @@ function useDateManager(parameters = {}) {
       defaultDates,
       utils,
       internalProps
-    }))
+    })),
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value) ? utils.format(value, 'fullDate') : null;
+      return localeText.openDatePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure]);
 }
 

package/node/managers/useDateTimeManager.js

@@ -31,7 +31,15 @@ function useDateTimeManager(parameters = {}) {
       internalProps,
       utils,
       defaultDates
-    }))
+    })),
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value) ? utils.format(value, 'fullDate') : null;
+      return localeText.openDatePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure]);
 }
 

package/node/managers/useTimeManager.js

@@ -28,7 +28,15 @@ function useTimeManager(parameters = {}) {
     }) => (0, _extends2.default)({}, internalProps, getTimeFieldInternalPropsDefaults({
       utils,
       internalProps
-    }))
+    })),
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value) ? utils.format(value, 'fullTime') : null;
+      return localeText.openTimePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure]);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.9",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -41,7 +41,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.0.0-alpha.7"
+    "@mui/x-internals": "8.0.0-alpha.9"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/internals/utils/convertFieldResponseIntoMuiTextFieldProps.d.ts

@@ -1,3 +0,0 @@
-import { TextFieldProps } from '@mui/material/TextField';
-import { UseFieldResponse } from '../hooks/useField';
-export declare const convertFieldResponseIntoMuiTextFieldProps: <TFieldResponse extends UseFieldResponse<any, any>>({ enableAccessibleFieldDOMStructure, ...fieldResponse }: TFieldResponse) => TextFieldProps;

package/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js

@@ -1,44 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["enableAccessibleFieldDOMStructure"],
-  _excluded2 = ["InputProps", "readOnly"],
-  _excluded3 = ["onPaste", "onKeyDown", "inputMode", "readOnly", "InputProps", "inputProps", "inputRef"];
-export const convertFieldResponseIntoMuiTextFieldProps = _ref => {
-  let {
-      enableAccessibleFieldDOMStructure
-    } = _ref,
-    fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
-  if (enableAccessibleFieldDOMStructure) {
-    const {
-        InputProps,
-        readOnly
-      } = fieldResponse,
-      other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2);
-    return _extends({}, other, {
-      InputProps: _extends({}, InputProps ?? {}, {
-        readOnly
-      })
-    });
-  }
-  const {
-      onPaste,
-      onKeyDown,
-      inputMode,
-      readOnly,
-      InputProps,
-      inputProps,
-      inputRef
-    } = fieldResponse,
-    other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
-  return _extends({}, other, {
-    InputProps: _extends({}, InputProps ?? {}, {
-      readOnly
-    }),
-    inputProps: _extends({}, inputProps ?? {}, {
-      inputMode,
-      onPaste,
-      onKeyDown,
-      ref: inputRef
-    })
-  });
-};