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

package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -1,41 +1,39 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DesktopDateTimePickerLayout = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _RtlProvider = require("@mui/system/RtlProvider");
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _PickersLayout = require("../PickersLayout");
+var _usePickerContext = require("../hooks/usePickerContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
  */
 const DesktopDateTimePickerLayout = exports.DesktopDateTimePickerLayout = /*#__PURE__*/React.forwardRef(function DesktopDateTimePickerLayout(props, ref) {
-  const isRtl = (0, _RtlProvider.useRtl)();
   const {
     toolbar,
     tabs,
     content,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   } = (0, _PickersLayout.usePickerLayout)(props);
+  const {
+    orientation
+  } = (0, _usePickerContext.usePickerContext)();
   const {
     sx,
     className,
-    isLandscape,
     classes
   } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
-  const ownerState = (0, _extends2.default)({}, props, {
-    isRtl
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutRoot, {
     ref: ref,
     className: (0, _clsx.default)(_PickersLayout.pickersLayoutClasses.root, classes?.root, className),
@@ -49,8 +47,9 @@ const DesktopDateTimePickerLayout = exports.DesktopDateTimePickerLayout = /*#__P
       }
     }, ...(Array.isArray(sx) ? sx : [sx])],
     ownerState: ownerState,
-    children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutContentWrapper, {
+    children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutContentWrapper, {
       className: (0, _clsx.default)(_PickersLayout.pickersLayoutClasses.contentWrapper, classes?.contentWrapper),
+      ownerState: ownerState,
       sx: {
         display: 'grid'
       },
@@ -74,11 +73,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  isLandscape: _propTypes.default.bool.isRequired,
-  /**
-   * `true` if the application is in right-to-left direction.
-   */
-  isRtl: _propTypes.default.bool.isRequired,
   isValid: _propTypes.default.func.isRequired,
   onAccept: _propTypes.default.func.isRequired,
   onCancel: _propTypes.default.func.isRequired,
@@ -90,10 +84,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
   onSelectShortcut: _propTypes.default.func.isRequired,
   onSetToday: _propTypes.default.func.isRequired,
   onViewChange: _propTypes.default.func.isRequired,
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
   /**
    * The props used for each component slot.
    * @default {}
@@ -108,8 +98,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  value: _propTypes.default.any,
+  value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
-  wrapperVariant: _propTypes.default.oneOf(['desktop', 'mobile'])
+  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
 } : void 0;

package/node/PickersCalendarHeader/PickersCalendarHeader.js

@@ -24,13 +24,11 @@ var _icons = require("../icons");
 var _PickersArrowSwitcher = require("../internals/components/PickersArrowSwitcher");
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _pickersCalendarHeaderClasses = require("./pickersCalendarHeaderClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone", "format"],
+const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "classes", "timezone", "format"],
   _excluded2 = ["ownerState"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     labelContainer: ['labelContainer'],
@@ -139,12 +137,15 @@ const PickersCalendarHeader = exports.PickersCalendarHeader = /*#__PURE__*/React
       views,
       labelId,
       className,
+      classes: classesProp,
       timezone,
       format = `${utils.formats.month} ${utils.formats.year}`
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const classes = useUtilityClasses(classesProp);
   const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
   const switchViewButtonProps = (0, _useSlotProps2.default)({
     elementType: SwitchViewButton,

package/node/PickersLayout/PickersLayout.js

@@ -14,14 +14,14 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _pickersLayoutClasses = require("./pickersLayoutClasses");
 var _usePickerLayout = _interopRequireDefault(require("./usePickerLayout"));
+var _usePickerContext = require("../hooks/usePickerContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    isLandscape,
-    classes
+    pickerOrientation
   } = ownerState;
   const slots = {
-    root: ['root', isLandscape && 'landscape'],
+    root: ['root', pickerOrientation === 'landscape' && 'landscape'],
     contentWrapper: ['contentWrapper']
   };
   return (0, _composeClasses.default)(slots, _pickersLayoutClasses.getPickersLayoutUtilityClass, classes);
@@ -40,7 +40,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
   },
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
@@ -54,7 +54,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
     }
   }, {
     props: {
-      isLandscape: true,
+      pickerOrientation: 'landscape',
       isRtl: true
     },
     style: {
@@ -64,7 +64,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
     }
   }, {
     props: {
-      isLandscape: false
+      pickerOrientation: 'portrait'
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
@@ -78,7 +78,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
     }
   }, {
     props: {
-      isLandscape: false,
+      pickerOrientation: 'portrait',
       isRtl: true
     },
     style: {
@@ -117,23 +117,28 @@ const PickersLayout = exports.PickersLayout = /*#__PURE__*/React.forwardRef(func
     content,
     tabs,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   } = (0, _usePickerLayout.default)(props);
+  const {
+    orientation,
+    variant
+  } = (0, _usePickerContext.usePickerContext)();
   const {
     sx,
     className,
-    isLandscape,
-    wrapperVariant
+    classes: classesProp
   } = props;
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp, ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersLayoutRoot, {
     ref: ref,
     sx: sx,
     className: (0, _clsx.default)(classes.root, className),
-    ownerState: props,
-    children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersLayoutContentWrapper, {
+    ownerState: ownerState,
+    children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,
-      children: wrapperVariant === 'desktop' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      ownerState: ownerState,
+      children: variant === 'desktop' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [content, tabs]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [tabs, content]
@@ -152,11 +157,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  isLandscape: _propTypes.default.bool.isRequired,
-  /**
-   * `true` if the application is in right-to-left direction.
-   */
-  isRtl: _propTypes.default.bool.isRequired,
   isValid: _propTypes.default.func.isRequired,
   onAccept: _propTypes.default.func.isRequired,
   onCancel: _propTypes.default.func.isRequired,
@@ -168,10 +168,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   onSelectShortcut: _propTypes.default.func.isRequired,
   onSetToday: _propTypes.default.func.isRequired,
   onViewChange: _propTypes.default.func.isRequired,
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
   /**
    * The props used for each component slot.
    * @default {}
@@ -186,8 +182,7 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  value: _propTypes.default.any,
+  value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
-  wrapperVariant: _propTypes.default.oneOf(['desktop', 'mobile'])
+  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
 } : void 0;

package/node/PickersLayout/usePickerLayout.js

@@ -11,20 +11,22 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _PickersActionBar = require("../PickersActionBar");
 var _pickersLayoutClasses = require("./pickersLayoutClasses");
 var _PickersShortcuts = require("../PickersShortcuts");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
 }
 const useUtilityClasses = (classes, ownerState) => {
   const {
-    isLandscape
+    pickerOrientation
   } = ownerState;
   const slots = {
-    root: ['root', isLandscape && 'landscape'],
+    root: ['root', pickerOrientation === 'landscape' && 'landscape'],
     contentWrapper: ['contentWrapper'],
     toolbar: ['toolbar'],
     actionBar: ['actionBar'],
@@ -36,10 +38,14 @@ const useUtilityClasses = (classes, ownerState) => {
 };
 const usePickerLayout = props => {
   const {
-    ownerState: pickersOwnerState
+    ownerState: pickerOwnerState
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const {
-    wrapperVariant,
+    variant,
+    orientation
+  } = (0, _hooks.usePickerContext)();
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const {
     onAccept,
     onClear,
     onCancel,
@@ -51,7 +57,6 @@ const usePickerLayout = props => {
     onChange,
     onSelectShortcut,
     isValid,
-    isLandscape,
     children,
     slots,
     slotProps,
@@ -61,9 +66,8 @@ const usePickerLayout = props => {
     // - For pickers value: PickerValidDate | null
     // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props;
-  const ownerState = (0, _extends2.default)({}, pickersOwnerState, {
-    wrapperVariant,
-    isLandscape
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    isRtl
   });
   const classes = useUtilityClasses(classesProp, ownerState);
 
@@ -77,7 +81,7 @@ const usePickerLayout = props => {
       onClear,
       onCancel,
       onSetToday,
-      actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
+      actions: variant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
     ownerState
@@ -90,7 +94,8 @@ const usePickerLayout = props => {
     elementType: Toolbar,
     externalSlotProps: slotProps?.toolbar,
     additionalProps: {
-      isLandscape,
+      isLandscape: orientation === 'landscape',
+      // Will be removed in a follow up PR?
       onChange,
       value,
       view,
@@ -120,7 +125,8 @@ const usePickerLayout = props => {
     externalSlotProps: slotProps?.shortcuts,
     additionalProps: {
       isValid,
-      isLandscape,
+      isLandscape: orientation === 'landscape',
+      // Will be removed in a follow up PR?
       onChange: onSelectShortcut
     },
     className: classes.shortcuts,
@@ -132,7 +138,8 @@ const usePickerLayout = props => {
     content,
     tabs,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   };
 };
 var _default = exports.default = usePickerLayout;

package/node/TimeField/TimeField.js

@@ -19,6 +19,7 @@ var _useTimeField = require("./useTimeField");
 var _hooks = require("../hooks");
 var _PickersTextField = require("../PickersTextField");
 var _convertFieldResponseIntoMuiTextFieldProps = require("../internals/utils/convertFieldResponseIntoMuiTextFieldProps");
+var _useFieldOwnerState = require("../internals/hooks/useFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
 /**
@@ -43,7 +44,7 @@ const TimeField = exports.TimeField = /*#__PURE__*/React.forwardRef(function Tim
       inputProps
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = (0, _useFieldOwnerState.useFieldOwnerState)(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const textFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
@@ -275,10 +276,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   shouldDisableTime: _propTypes.default.func,
   /**
-   * 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, '')`.

package/node/hooks/useParsedFormat.js

@@ -14,7 +14,7 @@ var _useField = require("../internals/hooks/useField/useField.utils");
 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.
+ * This format is localized (for example `AAAA` for the year with the French locale) and cannot be parsed by your date library.
  * @param {object} The parameters needed to build the placeholder.
  * @param {string} params.format Format of the date to use.
  * @param {'dense' | 'spacious'} params.formatDensity Density of the format (setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character).

package/node/index.js

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

package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -18,8 +18,9 @@ var _useSlotProps3 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _icons = require("../../../icons");
 var _pickersArrowSwitcherClasses = require("./pickersArrowSwitcherClasses");
+var _usePickerPrivateContext = require("../../hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId"],
+const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId", "classes"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"];
 const PickersArrowSwitcherRoot = (0, _styles.styled)('div', {
@@ -52,10 +53,7 @@ const PickersArrowSwitcherButton = (0, _styles.styled)(_IconButton.default, {
     }
   }]
 });
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     spacer: ['spacer'],
@@ -86,11 +84,14 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
       isPreviousHidden,
       onGoToPrevious,
       previousLabel,
-      labelId
+      labelId,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const classes = useUtilityClasses(classesProp);
   const nextProps = {
     isDisabled: isNextDisabled,
     isHidden: isNextHidden,
@@ -116,7 +117,7 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
       onClick: previousProps.goTo
     },
     ownerState: (0, _extends2.default)({}, ownerState, {
-      hidden: previousProps.isHidden
+      hidden: previousProps.isHidden ?? false
     }),
     className: (0, _clsx.default)(classes.button, classes.previousIconButton)
   });
@@ -133,7 +134,7 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
       onClick: nextProps.goTo
     },
     ownerState: (0, _extends2.default)({}, ownerState, {
-      hidden: nextProps.isHidden
+      hidden: nextProps.isHidden ?? false
     }),
     className: (0, _clsx.default)(classes.button, classes.nextIconButton)
   });

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

@@ -72,7 +72,6 @@ const useFieldState = params => {
     const stateWithoutReferenceDate = {
       sections,
       value: valueFromTheOutside,
-      referenceValue: valueManager.emptyValue,
       tempValueStrAndroid: null
     };
     const granularity = (0, _getDefaultReferenceDate.getSectionTypeGranularity)(sections);

package/node/internals/hooks/useFieldOwnerState.js

@@ -0,0 +1,20 @@
+"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.useFieldOwnerState = useFieldOwnerState;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _usePickerPrivateContext = require("./usePickerPrivateContext");
+function useFieldOwnerState(parameters) {
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  return React.useMemo(() => (0, _extends2.default)({}, pickerOwnerState, {
+    isFieldDisabled: parameters.disabled ?? false,
+    isFieldReadOnly: parameters.readOnly ?? false
+  }), [pickerOwnerState, parameters.disabled, parameters.readOnly]);
+}

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

@@ -1,13 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePicker = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _warning = require("@mui/x-internals/warning");
 var _usePickerValue = require("./usePickerValue");
 var _usePickerViews = require("./usePickerViews");
-var _usePickerLayoutProps = require("./usePickerLayoutProps");
 var _usePickerProvider = require("./usePickerProvider");
 const usePicker = ({
   props,
@@ -41,12 +42,6 @@ const usePicker = ({
     propsFromPickerValue: pickerValueResponse.viewProps,
     rendererInterceptor
   });
-  const pickerLayoutResponse = (0, _usePickerLayoutProps.usePickerLayoutProps)({
-    props,
-    variant,
-    propsFromPickerValue: pickerValueResponse.layoutProps,
-    propsFromPickerViews: pickerViewsResponse.layoutProps
-  });
   const providerProps = (0, _usePickerProvider.usePickerProvider)({
     props,
     pickerValueResponse,
@@ -65,7 +60,7 @@ const usePicker = ({
     hasUIView: pickerViewsResponse.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
-    layoutProps: pickerLayoutResponse.layoutProps,
+    layoutProps: (0, _extends2.default)({}, pickerViewsResponse.layoutProps, pickerValueResponse.layoutProps),
     // Picker provider
     providerProps,
     // Picker owner state

package/node/internals/index.js

@@ -261,6 +261,12 @@ Object.defineProperty(exports, "useField", {
     return _useField.useField;
   }
 });
+Object.defineProperty(exports, "useFieldOwnerState", {
+  enumerable: true,
+  get: function () {
+    return _useFieldOwnerState.useFieldOwnerState;
+  }
+});
 Object.defineProperty(exports, "useLocalizationContext", {
   enumerable: true,
   get: function () {
@@ -329,6 +335,7 @@ var _PickersToolbarButton = require("./components/PickersToolbarButton");
 var _dimensions = require("./constants/dimensions");
 var _useValueWithTimezone = require("./hooks/useValueWithTimezone");
 var _useField = require("./hooks/useField");
+var _useFieldOwnerState = require("./hooks/useFieldOwnerState");
 var _usePicker = require("./hooks/usePicker");
 var _usePickerPrivateContext = require("./hooks/usePickerPrivateContext");
 var _useStaticPicker = require("./hooks/useStaticPicker");

package/node/internals/models/pickers.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/locales/nlNL.js

@@ -22,10 +22,10 @@ const nlNLPickers = {
   // DateRange labels
   start: 'Start',
   end: 'Einde',
-  startDate: 'Start datum',
-  startTime: 'Start tijd',
-  endDate: 'Eind datum',
-  endTime: 'Eind tijd',
+  startDate: 'Startdatum',
+  startTime: 'Starttijd',
+  endDate: 'Einddatum',
+  endTime: 'Eindtijd',
   // Action bar
   cancelButtonLabel: 'Annuleren',
   clearButtonLabel: 'Resetten',
@@ -56,11 +56,11 @@ const nlNLPickers = {
   timeTableLabel: 'kies tijd',
   dateTableLabel: 'kies datum',
   // Field section placeholders
-  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
+  fieldYearPlaceholder: params => 'J'.repeat(params.digitAmount),
   fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
   fieldDayPlaceholder: () => 'DD',
   fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
-  fieldHoursPlaceholder: () => 'hh',
+  fieldHoursPlaceholder: () => 'uu',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
   fieldMeridiemPlaceholder: () => 'aa',
@@ -74,6 +74,6 @@ const nlNLPickers = {
   seconds: 'Seconden',
   meridiem: 'Middag',
   // Common
-  empty: 'Legen'
+  empty: 'Leeg'
 };
 const nlNL = exports.nlNL = (0, _getPickersLocalization.getPickersLocalization)(nlNLPickers);

package/node/validation/useValidation.js

@@ -12,7 +12,7 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _useUtils = require("../internals/hooks/useUtils");
 /**
  * Utility hook to check if a given value is valid based on the provided validation props.
- * @template TValue The value type. It will be either the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+ * @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.
  * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
  * @param {UseValidationOptions<TValue, TError, TValidationProps>} options The options to configure the hook.
  * @param {TValue} options.value The value to validate.

package/node/validation/validateDate.js

@@ -10,6 +10,14 @@ var _valueManagers = require("../internals/utils/valueManagers");
  * Validation props used by the Date Picker, Date Field and Date Calendar components.
  */
 
+/**
+ * Validation props as received by the validateDate method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateDate method.
+ */
+
 const validateDate = ({
   props,
   value,

package/node/validation/validateDateTime.js

@@ -11,6 +11,14 @@ var _valueManagers = require("../internals/utils/valueManagers");
  * Validation props used by the Date Time Picker and Date Time Field components.
  */
 
+/**
+ * Validation props as received by the validateDateTime method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateDateTime method.
+ */
+
 const validateDateTime = ({
   adapter,
   value,

package/node/validation/validateTime.js

@@ -10,6 +10,14 @@ var _valueManagers = require("../internals/utils/valueManagers");
  * Validation props used by the Time Picker, Time Field and Clock components.
  */
 
+/**
+ * Validation props as received by the validateTime method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateTime method.
+ */
+
 const validateTime = ({
   adapter,
   value,