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

package/node/YearCalendar/PickersYear.js

@@ -15,17 +15,13 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _pickersYearClasses = require("./pickersYearClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
-const useUtilityClasses = ownerState => {
-  const {
-    disabled,
-    selected,
-    classes
-  } = ownerState;
+const _excluded = ["autoFocus", "className", "classes", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
     root: ['root'],
-    yearButton: ['yearButton', disabled && 'disabled', selected && 'selected']
+    yearButton: ['yearButton', ownerState.isYearDisabled && 'disabled', ownerState.isYearSelected && 'selected']
   };
   return (0, _composeClasses.default)(slots, _pickersYearClasses.getPickersYearUtilityClass, classes);
 };
@@ -101,9 +97,10 @@ const PickersYear = exports.PickersYear = /*#__PURE__*/React.memo(function Picke
   const {
       autoFocus,
       className,
+      classes: classesProp,
       children,
-      disabled,
-      selected,
+      disabled = false,
+      selected = false,
       value,
       tabIndex,
       onClick,
@@ -119,7 +116,14 @@ const PickersYear = exports.PickersYear = /*#__PURE__*/React.memo(function Picke
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ref = React.useRef(null);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    isYearDisabled: disabled,
+    isYearSelected: selected
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
 
   // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
   (0, _useEnhancedEffect.default)(() => {
@@ -146,12 +150,12 @@ const PickersYear = exports.PickersYear = /*#__PURE__*/React.memo(function Picke
       onFocus: event => onFocus(event, value),
       onBlur: event => onBlur(event, value)
     },
-    ownerState: props,
+    ownerState,
     className: classes.yearButton
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersYearRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
-    ownerState: props
+    ownerState: ownerState
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(YearButton, (0, _extends2.default)({}, yearButtonProps))
   }));

package/node/YearCalendar/YearCalendar.js

@@ -23,12 +23,10 @@ var _valueManagers = require("../internals/utils/valueManagers");
 var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDate");
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _dimensions = require("../internals/constants/dimensions");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -81,6 +79,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
   const {
       autoFocus,
       className,
+      classes: classesProp,
       value: valueProp,
       defaultValue,
       referenceDate: referenceDateProp,
@@ -112,12 +111,16 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
-    onChange: onChange,
+    referenceDate: referenceDateProp,
+    onChange,
     valueManager: _valueManagers.singleItemValueManager
   });
   const now = (0, _useUtils.useNow)(timezone);
   const isRtl = (0, _RtlProvider.useRtl)();
   const utils = (0, _useUtils.useUtils)();
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
     value,
     utils,
@@ -127,8 +130,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.year
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);
   const selectedYear = React.useMemo(() => {
     if (value != null) {
@@ -291,7 +293,9 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    */
   defaultValue: _propTypes.default.object,
   /**
-   * If `true` picker is disabled
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
    */
   disabled: _propTypes.default.bool,
   /**
@@ -323,14 +327,15 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
   minDate: _propTypes.default.object,
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {TDate} value The new value.
+   * @param {PickerValidDate} value The new value.
    */
   onChange: _propTypes.default.func,
   onFocusedViewChange: _propTypes.default.func,
   onYearFocus: _propTypes.default.func,
   /**
-   * If `true` picker is readonly
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
    */
   readOnly: _propTypes.default.bool,
   /**
@@ -340,8 +345,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
   referenceDate: _propTypes.default.object,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: _propTypes.default.func,

package/node/hooks/index.js

@@ -15,16 +15,16 @@ Object.defineProperty(exports, "useParsedFormat", {
     return _useParsedFormat.useParsedFormat;
   }
 });
-Object.defineProperty(exports, "usePickersContext", {
+Object.defineProperty(exports, "usePickerContext", {
   enumerable: true,
   get: function () {
-    return _usePickersContext.usePickersContext;
+    return _usePickerContext.usePickerContext;
   }
 });
-Object.defineProperty(exports, "usePickersTranslations", {
+Object.defineProperty(exports, "usePickerTranslations", {
   enumerable: true,
   get: function () {
-    return _usePickersTranslations.usePickersTranslations;
+    return _usePickerTranslations.usePickerTranslations;
   }
 });
 Object.defineProperty(exports, "useSplitFieldProps", {
@@ -34,7 +34,7 @@ Object.defineProperty(exports, "useSplitFieldProps", {
   }
 });
 var _useClearableField = require("./useClearableField");
-var _usePickersTranslations = require("./usePickersTranslations");
+var _usePickerTranslations = require("./usePickerTranslations");
 var _useSplitFieldProps = require("./useSplitFieldProps");
 var _useParsedFormat = require("./useParsedFormat");
-var _usePickersContext = require("./usePickersContext");
+var _usePickerContext = require("./usePickerContext");

package/node/hooks/useClearableField.js

@@ -14,12 +14,12 @@ var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
 var _icons = require("../icons");
-var _usePickersTranslations = require("./usePickersTranslations");
+var _usePickerTranslations = require("./usePickerTranslations");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["clearable", "onClear", "InputProps", "sx", "slots", "slotProps"],
   _excluded2 = ["ownerState"];
 const useClearableField = props => {
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const {
       clearable,
       onClear,
@@ -37,7 +37,8 @@ const useClearableField = props => {
       ownerState: {},
       className: 'clearButton',
       additionalProps: {
-        title: translations.fieldClearLabel
+        title: translations.fieldClearLabel,
+        tabIndex: -1
       }
     }),
     iconButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);

package/node/hooks/useParsedFormat.js

@@ -11,7 +11,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _useUtils = require("../internals/hooks/useUtils");
 var _buildSectionsFromFormat = require("../internals/hooks/useField/buildSectionsFromFormat");
 var _useField = require("../internals/hooks/useField/useField.utils");
-var _usePickersTranslations = require("./usePickersTranslations");
+var _usePickerTranslations = require("./usePickerTranslations");
 /**
  * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
  * This format is localized (e.g: `AAAA` for the year with the French locale) and cannot be parsed by your date library.
@@ -29,7 +29,7 @@ const useParsedFormat = parameters => {
   } = parameters;
   const utils = (0, _useUtils.useUtils)();
   const isRtl = (0, _RtlProvider.useRtl)();
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(utils), [utils]);
   return React.useMemo(() => {
     const sections = (0, _buildSectionsFromFormat.buildSectionsFromFormat)({

package/node/hooks/usePickerContext.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePickerContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _PickerProvider = require("../internals/components/PickerProvider");
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+const usePickerContext = () => {
+  const value = React.useContext(_PickerProvider.PickerContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickerContext` can only be called in fields that are used as a slot of a picker component'].join('\n'));
+  }
+  return value;
+};
+exports.usePickerContext = usePickerContext;

package/node/hooks/usePickerTranslations.js

@@ -0,0 +1,10 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePickerTranslations = void 0;
+var _useUtils = require("../internals/hooks/useUtils");
+const usePickerTranslations = () => (0, _useUtils.useLocalizationContext)().localeText;
+exports.usePickerTranslations = usePickerTranslations;

package/node/index.js

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

package/node/internals/components/PickerProvider.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerPrivateContext = exports.PickerContext = void 0;
+exports.PickerProvider = PickerProvider;
+var React = _interopRequireWildcard(require("react"));
+var _LocalizationProvider = require("../../LocalizationProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+const PickerContext = exports.PickerContext = /*#__PURE__*/React.createContext(null);
+const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.createContext({
+  ownerState: {
+    isPickerDisabled: false,
+    isPickerReadOnly: false,
+    isPickerValueEmpty: false,
+    isPickerOpen: false,
+    pickerVariant: 'desktop',
+    pickerOrientation: 'portrait'
+  }
+});
+
+/**
+ * Provides the context for the various parts of a picker component:
+ * - contextValue: the context for the picker sub-components.
+ * - localizationProvider: the translations passed through the props and through a parent LocalizationProvider.
+ *
+ * @ignore - do not document.
+ */
+function PickerProvider(props) {
+  const {
+    contextValue,
+    privateContextValue,
+    localeText,
+    children
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPrivateContext.Provider, {
+      value: privateContextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
+        localeText: localeText,
+        children: children
+      })
+    })
+  });
+}

package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -17,7 +17,7 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _PickersPopper = require("../../components/PickersPopper");
 var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
-var _PickersProvider = require("../../components/PickersProvider");
+var _PickerProvider = require("../../components/PickerProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["props", "getOpenDialogAriaText"],
   _excluded2 = ["ownerState"],
@@ -63,17 +63,18 @@ const useDesktopPicker = _ref => {
     actions,
     hasUIView,
     layoutProps,
+    providerProps,
     renderCurrentView,
     shouldRestoreFocus,
     fieldProps: pickerFieldProps,
-    contextValue,
     ownerState
   } = (0, _usePicker.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
     fieldRef,
+    localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'desktop'
+    variant: 'desktop'
   }));
   const InputAdornment = slots.inputAdornment ?? _InputAdornment.default;
   const _useSlotProps = (0, _useSlotProps3.default)({
@@ -82,7 +83,7 @@ const useDesktopPicker = _ref => {
       additionalProps: {
         position: 'end'
       },
-      ownerState: props
+      ownerState
     }),
     inputAdornmentProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
   const OpenPickerButton = slots.openPickerButton ?? _IconButton.default;
@@ -95,7 +96,7 @@ const useDesktopPicker = _ref => {
         'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
         edge: inputAdornmentProps.position
       },
-      ownerState: props
+      ownerState
     }),
     openPickerButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps2, _excluded3);
   const OpenPickerIcon = slots.openPickerIcon;
@@ -108,27 +109,32 @@ const useDesktopPicker = _ref => {
   const fieldProps = (0, _useSlotProps3.default)({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
-    additionalProps: (0, _extends2.default)({}, pickerFieldProps, isToolbarHidden && {
-      id: labelId
-    }, {
+    additionalProps: (0, _extends2.default)({
+      // Internal props
       readOnly,
       disabled,
-      className,
-      sx,
       format,
       formatDensity,
       enableAccessibleFieldDOMStructure,
       selectedSections,
       onSelectedSectionsChange,
       timezone,
+      autoFocus: autoFocus && !props.open
+    }, pickerFieldProps, {
+      // onChange and value
+
+      // Forwarded props
+      className,
+      sx,
       label,
       name,
-      autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
-    }, inputRef ? {
+    }, isToolbarHidden && {
+      id: labelId
+    }, !!inputRef && {
       inputRef
-    } : {}),
-    ownerState: props
+    }),
+    ownerState
   });
 
   // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
@@ -166,9 +172,7 @@ const useDesktopPicker = _ref => {
     }, innerSlotProps?.popper)
   });
   const handleFieldRef = (0, _useForkRef.default)(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersProvider.PickersProvider, {
-    contextValue: contextValue,
-    localeText: localeText,
+  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,
@@ -189,7 +193,7 @@ const useDesktopPicker = _ref => {
         children: renderCurrentView()
       }))
     }))]
-  });
+  }));
   return {
     renderPicker
   };

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

@@ -25,7 +25,7 @@ const useField = params => {
     internalProps: {
       unstableFieldRef,
       minutesStep,
-      enableAccessibleFieldDOMStructure = false,
+      enableAccessibleFieldDOMStructure = true,
       disabled = false,
       readOnly = false
     },

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

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _usePickersTranslations = require("../../../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../../../hooks/usePickerTranslations");
 var _useUtils = require("../useUtils");
 var _useField = require("./useField.utils");
 var _buildSectionsFromFormat = require("./buildSectionsFromFormat");
@@ -18,7 +18,7 @@ var _useValueWithTimezone = require("../useValueWithTimezone");
 var _getDefaultReferenceDate = require("../../utils/getDefaultReferenceDate");
 const useFieldState = params => {
   const utils = (0, _useUtils.useUtils)();
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const adapter = (0, _useUtils.useLocalizationContext)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const {
@@ -38,7 +38,7 @@ const useFieldState = params => {
       onSelectedSectionsChange,
       shouldRespectLeadingZeros = false,
       timezone: timezoneProp,
-      enableAccessibleFieldDOMStructure = false
+      enableAccessibleFieldDOMStructure = true
     }
   } = params;
   const {
@@ -49,6 +49,7 @@ const useFieldState = params => {
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager
   });

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

@@ -13,7 +13,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedE
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useField = require("./useField.utils");
 var _utils = require("../../utils/utils");
-var _usePickersTranslations = require("../../../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../../../hooks/usePickerTranslations");
 var _useUtils = require("../useUtils");
 const useFieldV7TextField = params => {
   const {
@@ -47,7 +47,7 @@ const useFieldV7TextField = params => {
   } = params;
   const sectionListRef = React.useRef(null);
   const handleSectionListRef = (0, _useForkRef.default)(inSectionListRef, sectionListRef);
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
   const id = (0, _useId.default)();
   const [focused, setFocused] = React.useState(false);
@@ -206,8 +206,9 @@ const useFieldV7TextField = params => {
     if (focused || !sectionListRef.current) {
       return;
     }
+    const activeElement = (0, _utils.getActiveElement)(document);
     setFocused(true);
-    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement((0, _utils.getActiveElement)(document)) != null;
+    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
     if (!isFocusInsideASection) {
       setSelectedSections(sectionOrder.startIndex);
     }

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

@@ -16,7 +16,7 @@ var _PickersModalDialog = require("../../components/PickersModalDialog");
 var _usePicker = require("../usePicker");
 var _utils = require("../../utils/utils");
 var _PickersLayout = require("../../../PickersLayout");
-var _PickersProvider = require("../../components/PickersProvider");
+var _PickerProvider = require("../../components/PickerProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["props", "getOpenDialogAriaText"];
 /**
@@ -56,42 +56,49 @@ const useMobilePicker = _ref => {
     open,
     actions,
     layoutProps,
+    providerProps,
     renderCurrentView,
     fieldProps: pickerFieldProps,
-    contextValue
+    ownerState
   } = (0, _usePicker.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
     fieldRef,
+    localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'mobile'
+    variant: 'mobile'
   }));
   const Field = slots.field;
   const fieldProps = (0, _useSlotProps.default)({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
-    additionalProps: (0, _extends2.default)({}, pickerFieldProps, isToolbarHidden && {
-      id: labelId
-    }, !(disabled || readOnly) && {
-      onClick: actions.onOpen,
-      onKeyDown: (0, _utils.onSpaceOrEnter)(actions.onOpen)
-    }, {
+    additionalProps: (0, _extends2.default)({
+      // Internal props
       readOnly: readOnly ?? true,
       disabled,
-      className,
-      sx,
       format,
       formatDensity,
       enableAccessibleFieldDOMStructure,
       selectedSections,
       onSelectedSectionsChange,
-      timezone,
+      timezone
+    }, pickerFieldProps, {
+      // onChange and value
+
+      // Forwarded props
+      className,
+      sx,
       label,
       name
-    }, inputRef ? {
+    }, isToolbarHidden && {
+      id: labelId
+    }, !(disabled || readOnly) && {
+      onClick: actions.onOpen,
+      onKeyDown: (0, _utils.onSpaceOrEnter)(actions.onOpen)
+    }, !!inputRef && {
       inputRef
-    } : {}),
-    ownerState: props
+    }),
+    ownerState
   });
 
   // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
@@ -119,9 +126,7 @@ const useMobilePicker = _ref => {
     }, innerSlotProps?.mobilePaper)
   });
   const handleFieldRef = (0, _useForkRef.default)(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersProvider.PickersProvider, {
-    contextValue: contextValue,
-    localeText: localeText,
+  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,
@@ -136,7 +141,7 @@ const useMobilePicker = _ref => {
         children: renderCurrentView()
       }))
     }))]
-  });
+  }));
   return {
     renderPicker
   };

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

@@ -8,17 +8,18 @@ var _warning = require("@mui/x-internals/warning");
 var _usePickerValue = require("./usePickerValue");
 var _usePickerViews = require("./usePickerViews");
 var _usePickerLayoutProps = require("./usePickerLayoutProps");
-var _usePickerOwnerState = require("./usePickerOwnerState");
+var _usePickerProvider = require("./usePickerProvider");
 const usePicker = ({
   props,
   valueManager,
   valueType,
-  wrapperVariant,
+  variant,
   additionalViewProps,
   validator,
   autoFocusView,
   rendererInterceptor,
-  fieldRef
+  fieldRef,
+  localeText
 }) => {
   if (process.env.NODE_ENV !== 'production') {
     if (props.renderInput != null) {
@@ -29,7 +30,7 @@ const usePicker = ({
     props,
     valueManager,
     valueType,
-    wrapperVariant,
+    variant,
     validator
   });
   const pickerViewsResponse = (0, _usePickerViews.usePickerViews)({
@@ -42,13 +43,17 @@ const usePicker = ({
   });
   const pickerLayoutResponse = (0, _usePickerLayoutProps.usePickerLayoutProps)({
     props,
-    wrapperVariant,
+    variant,
     propsFromPickerValue: pickerValueResponse.layoutProps,
     propsFromPickerViews: pickerViewsResponse.layoutProps
   });
-  const pickerOwnerState = (0, _usePickerOwnerState.usePickerOwnerState)({
+  const providerProps = (0, _usePickerProvider.usePickerProvider)({
     props,
-    pickerValueResponse
+    pickerValueResponse,
+    localeText,
+    valueManager,
+    variant,
+    views: pickerViewsResponse.views
   });
   return {
     // Picker value
@@ -61,10 +66,10 @@ const usePicker = ({
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
     layoutProps: pickerLayoutResponse.layoutProps,
-    // Picker context
-    contextValue: pickerValueResponse.contextValue,
+    // Picker provider
+    providerProps,
     // Picker owner state
-    ownerState: pickerOwnerState
+    ownerState: providerProps.privateContextValue.ownerState
   };
 };
 exports.usePicker = usePicker;