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

package/node/PickersLayout/usePickerLayout.js

@@ -1,15 +1,16 @@
 "use strict";
 'use client';
 
-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.default = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _PickersActionBar = require("../PickersActionBar");
@@ -18,6 +19,7 @@ var _PickersShortcuts = require("../PickersShortcuts");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ownerState"];
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
 }
@@ -41,24 +43,14 @@ const usePickerLayout = props => {
     ownerState: pickerOwnerState
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const {
-    variant,
-    orientation,
     view
   } = (0, _hooks.usePickerContext)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const {
-    value,
-    onChange,
-    onSelectShortcut,
-    isValid,
     children,
     slots,
     slotProps,
     classes: classesProp
-    // TODO: Remove this "as" hack. It get introduced to mark `value` prop in PickersLayoutProps as not required.
-    // The true type should be
-    // - For pickers value: PickerValidDate | null
-    // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props;
   const ownerState = React.useMemo(() => (0, _extends2.default)({}, pickerOwnerState, {
     layoutDirection: isRtl ? 'rtl' : 'ltr'
@@ -67,28 +59,23 @@ const usePickerLayout = props => {
 
   // Action bar
   const ActionBar = slots?.actionBar ?? _PickersActionBar.PickersActionBar;
-  const actionBarProps = (0, _useSlotProps.default)({
-    elementType: ActionBar,
-    externalSlotProps: slotProps?.actionBar,
-    additionalProps: {
-      actions: variant === 'desktop' ? [] : ['cancel', 'accept']
-    },
-    className: classes.actionBar,
-    ownerState
-  });
+  const _useSlotProps = (0, _useSlotProps2.default)({
+      elementType: ActionBar,
+      externalSlotProps: slotProps?.actionBar,
+      additionalProps: {
+        actions: ['cancel', 'accept']
+      },
+      className: classes.actionBar,
+      ownerState
+    }),
+    actionBarProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
   const actionBar = /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionBar, (0, _extends2.default)({}, actionBarProps));
 
   // Toolbar
   const Toolbar = slots?.toolbar;
-  const toolbarProps = (0, _useSlotProps.default)({
+  const toolbarProps = (0, _useSlotProps2.default)({
     elementType: Toolbar,
     externalSlotProps: slotProps?.toolbar,
-    additionalProps: {
-      isLandscape: orientation === 'landscape',
-      // Will be removed in a follow up PR?
-      onChange,
-      value
-    },
     className: classes.toolbar,
     ownerState
   });
@@ -105,15 +92,9 @@ const usePickerLayout = props => {
 
   // Shortcuts
   const Shortcuts = slots?.shortcuts ?? _PickersShortcuts.PickersShortcuts;
-  const shortcutsProps = (0, _useSlotProps.default)({
+  const shortcutsProps = (0, _useSlotProps2.default)({
     elementType: Shortcuts,
     externalSlotProps: slotProps?.shortcuts,
-    additionalProps: {
-      isValid,
-      isLandscape: orientation === 'landscape',
-      // Will be removed in a follow up PR?
-      onChange: onSelectShortcut
-    },
     className: classes.shortcuts,
     ownerState
   });

package/node/PickersShortcuts/PickersShortcuts.js

@@ -16,8 +16,9 @@ var _List = _interopRequireDefault(require("@mui/material/List"));
 var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _dimensions = require("../internals/constants/dimensions");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
+const _excluded = ["items", "changeImportance"],
   _excluded2 = ["getValue"];
 const PickersShortcutsRoot = (0, _styles.styled)(_List.default, {
   name: 'MuiPickersLayout',
@@ -37,11 +38,13 @@ const PickersShortcutsRoot = (0, _styles.styled)(_List.default, {
 function PickersShortcuts(props) {
   const {
       items,
-      changeImportance = 'accept',
-      onChange,
-      isValid
+      changeImportance = 'accept'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    setValue
+  } = (0, _hooks.usePickerActionsContext)();
+  const isValidValue = (0, _hooks.useIsValidValue)();
   if (items == null || items.length === 0) {
     return null;
   }
@@ -51,14 +54,17 @@ function PickersShortcuts(props) {
       } = _ref,
       item = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
     const newValue = getValue({
-      isValid
+      isValid: isValidValue
     });
     return (0, _extends2.default)({}, item, {
       label: item.label,
       onClick: () => {
-        onChange(newValue, changeImportance, item);
+        setValue(newValue, {
+          changeImportance,
+          shortcut: item
+        });
       },
-      disabled: !isValid(newValue)
+      disabled: !isValidValue(newValue)
     });
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersShortcutsRoot, (0, _extends2.default)({
@@ -102,8 +108,6 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
    * @default false
    */
   disablePadding: _propTypes.default.bool,
-  isLandscape: _propTypes.default.bool.isRequired,
-  isValid: _propTypes.default.func.isRequired,
   /**
    * Ordered array of shortcuts to display.
    * If empty, does not display the shortcuts.
@@ -114,7 +118,6 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
     id: _propTypes.default.string,
     label: _propTypes.default.string.isRequired
   })),
-  onChange: _propTypes.default.func.isRequired,
   style: _propTypes.default.object,
   /**
    * The content of the subheader, normally `ListSubheader`.

package/node/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -221,6 +221,9 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
     muiFormControl.onFocus?.(event);
     onFocus?.(event);
   };
+  const handleHiddenInputFocus = event => {
+    handleInputFocus(event);
+  };
   const handleInputBlur = event => {
     muiFormControl.onBlur?.(event);
     onBlur?.(event);
@@ -296,6 +299,10 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       readOnly: readOnly,
       required: muiFormControl.required,
       disabled: muiFormControl.disabled
+      // Hidden input element cannot be focused, trigger the root focus instead
+      // This allows to maintain the ability to do `inputRef.current.focus()` to focus the field
+      ,
+      onFocus: handleHiddenInputFocus
     }, inputProps, {
       ref: handleInputRef
     }))]

package/node/PickersTextField/PickersTextField.js

@@ -132,7 +132,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       required: required,
       ownerState: ownerState
     }, other, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
+      children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
         htmlFor: id,
         id: inputLabelId
       }, InputLabelProps, {

package/node/TimeField/useTimeField.js

@@ -5,24 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTimeField = void 0;
-var _valueManagers = require("../internals/utils/valueManagers");
 var _useField = require("../internals/hooks/useField");
-var _validation = require("../validation");
 var _hooks = require("../hooks");
-var _defaultizedFieldProps = require("../internals/hooks/defaultizedFieldProps");
-const useTimeField = inProps => {
-  const props = (0, _defaultizedFieldProps.useDefaultizedTimeField)(inProps);
+var _managers = require("../managers");
+const useTimeField = props => {
+  const manager = (0, _managers.useTimeManager)(props);
   const {
     forwardedProps,
     internalProps
   } = (0, _hooks.useSplitFieldProps)(props, 'time');
+  const internalPropsWithDefaults = (0, _useField.useFieldInternalPropsWithDefaults)({
+    manager,
+    internalProps
+  });
   return (0, _useField.useField)({
     forwardedProps,
-    internalProps,
-    valueManager: _valueManagers.singleItemValueManager,
-    fieldValueManager: _valueManagers.singleItemFieldValueManager,
-    validator: _validation.validateTime,
-    valueType: 'time'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };
 exports.useTimeField = useTimeField;

package/node/TimePicker/TimePicker.js

@@ -76,8 +76,8 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   autoFocus: _propTypes.default.bool,
   className: _propTypes.default.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: _propTypes.default.bool,
   /**

package/node/TimePicker/TimePickerToolbar.js

@@ -26,7 +26,7 @@ var _dateUtils = require("../internals/utils/date-utils");
 var _hooks = require("../hooks");
 var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "className", "classes"];
+const _excluded = ["ampm", "ampmInClock", "className", "classes"];
 const useUtilityClasses = (classes, ownerState) => {
   const {
     pickerOrientation,
@@ -129,9 +129,6 @@ function TimePickerToolbar(inProps) {
   const {
       ampm,
       ampmInClock,
-      value,
-      isLandscape,
-      onChange,
       className,
       classes: classesProp
     } = props,
@@ -141,18 +138,27 @@ function TimePickerToolbar(inProps) {
   const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
   const classes = useUtilityClasses(classesProp, ownerState);
   const {
+    value,
+    setValue,
     disabled,
     readOnly,
     view,
-    onViewChange,
+    setView,
     views
   } = (0, _hooks.usePickerContext)();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
     meridiemMode,
     handleMeridiemChange
-  } = (0, _dateHelpersHooks.useMeridiemMode)(value, ampm, onChange);
-  const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
+  } = (0, _dateHelpersHooks.useMeridiemMode)(value, ampm, newValue => setValue(newValue, {
+    changeImportance: 'set'
+  }));
+  const formatSection = format => {
+    if (!utils.isValid(value)) {
+      return '--';
+    }
+    return utils.format(value, format);
+  };
   const separator = /*#__PURE__*/(0, _jsxRuntime.jsx)(TimePickerToolbarSeparator, {
     tabIndex: -1,
     value: ":",
@@ -163,7 +169,6 @@ function TimePickerToolbar(inProps) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TimePickerToolbarRoot, (0, _extends2.default)({
     landscapeDirection: "row",
     toolbarTitle: translations.timePickerToolbarTitle,
-    isLandscape: isLandscape,
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className)
   }, other, {
@@ -173,20 +178,20 @@ function TimePickerToolbar(inProps) {
       children: [(0, _utils.arrayIncludes)(views, 'hours') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
         tabIndex: -1,
         variant: "h3",
-        onClick: () => onViewChange('hours'),
+        onClick: () => setView('hours'),
         selected: view === 'hours',
-        value: value ? formatHours(value) : '--'
+        value: formatSection(ampm ? 'hours12h' : 'hours24h')
       }), (0, _utils.arrayIncludes)(views, ['hours', 'minutes']) && separator, (0, _utils.arrayIncludes)(views, 'minutes') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
         tabIndex: -1,
         variant: "h3",
-        onClick: () => onViewChange('minutes'),
+        onClick: () => setView('minutes'),
         selected: view === 'minutes',
-        value: value ? utils.format(value, 'minutes') : '--'
+        value: formatSection('minutes')
       }), (0, _utils.arrayIncludes)(views, ['minutes', 'seconds']) && separator, (0, _utils.arrayIncludes)(views, 'seconds') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
         variant: "h3",
-        onClick: () => onViewChange('seconds'),
+        onClick: () => setView('seconds'),
         selected: view === 'seconds',
-        value: value ? utils.format(value, 'seconds') : '--'
+        value: formatSection('seconds')
       })]
     }), showAmPmControl && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TimePickerToolbarAmPmSelection, {
       className: classes.ampmSelection,
@@ -228,8 +233,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: _propTypes.default.bool,
-  isLandscape: _propTypes.default.bool.isRequired,
-  onChange: _propTypes.default.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -243,6 +246,5 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * Toolbar value placeholder—it is displayed when the value is empty.
    * @default "––"
    */
-  toolbarPlaceholder: _propTypes.default.node,
-  value: _propTypes.default.object
+  toolbarPlaceholder: _propTypes.default.node
 } : void 0;

package/node/hooks/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "useClearableField", {
     return _useClearableField.useClearableField;
   }
 });
+Object.defineProperty(exports, "useIsValidValue", {
+  enumerable: true,
+  get: function () {
+    return _useIsValidValue.useIsValidValue;
+  }
+});
 Object.defineProperty(exports, "useParsedFormat", {
   enumerable: true,
   get: function () {
@@ -44,4 +50,5 @@ var _usePickerTranslations = require("./usePickerTranslations");
 var _useSplitFieldProps = require("./useSplitFieldProps");
 var _useParsedFormat = require("./useParsedFormat");
 var _usePickerContext = require("./usePickerContext");
-var _usePickerActionsContext = require("./usePickerActionsContext");
+var _usePickerActionsContext = require("./usePickerActionsContext");
+var _useIsValidValue = require("./useIsValidValue");

package/node/hooks/useIsValidValue.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IsValidValueContext = void 0;
+exports.useIsValidValue = useIsValidValue;
+var React = _interopRequireWildcard(require("react"));
+const IsValidValueContext = exports.IsValidValueContext = /*#__PURE__*/React.createContext(() => true);
+
+/**
+ * Returns a function to check if a value is valid according to the validation props passed to the parent picker.
+ */
+function useIsValidValue() {
+  return React.useContext(IsValidValueContext);
+}

package/node/hooks/usePickerContext.js

@@ -14,7 +14,7 @@ var _PickerProvider = require("../internals/components/PickerProvider");
 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'));
+    throw new Error('MUI X: The `usePickerContext` hook can only be called inside the context of a picker component');
   }
   return value;
 };

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-alpha.6
+ * @mui/x-date-pickers v8.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -463,4 +463,16 @@ Object.keys(_validation).forEach(function (key) {
       return _validation[key];
     }
   });
+});
+var _managers = require("./managers");
+Object.keys(_managers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _managers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _managers[key];
+    }
+  });
 });

package/node/internals/components/PickerProvider.js

@@ -8,6 +8,7 @@ exports.PickerPrivateContext = exports.PickerContext = exports.PickerActionsCont
 exports.PickerProvider = PickerProvider;
 var React = _interopRequireWildcard(require("react"));
 var _LocalizationProvider = require("../../LocalizationProvider");
+var _useIsValidValue = require("../../hooks/useIsValidValue");
 var _jsxRuntime = require("react/jsx-runtime");
 const PickerContext = exports.PickerContext = /*#__PURE__*/React.createContext(null);
 const PickerActionsContext = exports.PickerActionsContext = /*#__PURE__*/React.createContext(null);
@@ -35,6 +36,7 @@ function PickerProvider(props) {
     contextValue,
     actionsContextValue,
     privateContextValue,
+    isValidContextValue,
     localeText,
     children
   } = props;
@@ -44,9 +46,12 @@ function PickerProvider(props) {
       value: actionsContextValue,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPrivateContext.Provider, {
         value: privateContextValue,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
-          localeText: localeText,
-          children: children
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useIsValidValue.IsValidValueContext.Provider, {
+          value: isValidContextValue,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
+            localeText: localeText,
+            children: children
+          })
         })
       })
     })

package/node/internals/components/PickersToolbar.js

@@ -17,7 +17,7 @@ var _createStyled = require("@mui/system/createStyled");
 var _pickersToolbarClasses = require("./pickersToolbarClasses");
 var _useToolbarOwnerState = require("../hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
+const _excluded = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "classes", "landscapeDirection"];
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],

package/node/internals/hooks/date-helpers-hooks.js

@@ -36,11 +36,12 @@ function usePreviousMonthDisabled(month, {
 }
 function useMeridiemMode(date, ampm, onChange, selectionState) {
   const utils = (0, _useUtils.useUtils)();
-  const meridiemMode = (0, _timeUtils.getMeridiem)(date, utils);
+  const cleanDate = React.useMemo(() => !utils.isValid(date) ? null : date, [utils, date]);
+  const meridiemMode = (0, _timeUtils.getMeridiem)(cleanDate, utils);
   const handleMeridiemChange = React.useCallback(mode => {
-    const timeWithMeridiem = date == null ? null : (0, _timeUtils.convertToMeridiem)(date, mode, Boolean(ampm), utils);
+    const timeWithMeridiem = cleanDate == null ? null : (0, _timeUtils.convertToMeridiem)(cleanDate, mode, Boolean(ampm), utils);
     onChange(timeWithMeridiem, selectionState ?? 'partial');
-  }, [ampm, date, onChange, selectionState, utils]);
+  }, [ampm, cleanDate, onChange, selectionState, utils]);
   return {
     meridiemMode,
     handleMeridiemChange

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

@@ -60,7 +60,6 @@ const useDesktopPicker = _ref => {
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
     hasUIView,
-    layoutProps,
     providerProps,
     renderCurrentView,
     shouldRestoreFocus,
@@ -71,7 +70,6 @@ const useDesktopPicker = _ref => {
     fieldRef,
     localeText,
     autoFocusView: true,
-    additionalViewProps: {},
     variant: 'desktop'
   }));
   const InputAdornment = slots.inputAdornment ?? _InputAdornment.default;
@@ -187,7 +185,7 @@ const useDesktopPicker = _ref => {
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
       reduceAnimations: reduceAnimations,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, layoutProps, slotProps?.layout, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
         children: renderCurrentView()

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

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

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

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

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.useField = void 0;
+exports.useFieldInternalPropsWithDefaults = 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,6 +18,23 @@ 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 {

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

@@ -383,7 +383,7 @@ const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
       currentDate
     }) => ({
       minimum: 1,
-      maximum: currentDate != null && utils.isValid(currentDate) ? utils.getDaysInMonth(currentDate) : maxDaysInMonth,
+      maximum: utils.isValid(currentDate) ? utils.getDaysInMonth(currentDate) : maxDaysInMonth,
       longestMonth: longestMonth
     }),
     weekDay: ({
@@ -534,7 +534,7 @@ const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referen
 exports.mergeDateIntoReferenceDate = mergeDateIntoReferenceDate;
 const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 
-// TODO v8: Remove if we drop the v6 TextField approach.
+// TODO v9: Remove
 exports.isAndroid = isAndroid;
 const getSectionOrder = (sections, shouldApplyRTL) => {
   const neighbors = {};

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

@@ -156,7 +156,7 @@ const useFieldState = params => {
   const updateValueFromValueStr = valueStr => {
     const parseDateStr = (dateStr, referenceDate) => {
       const date = utils.parse(dateStr, format);
-      if (date == null || !utils.isValid(date)) {
+      if (!utils.isValid(date)) {
         return null;
       }
       const sections = (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
@@ -207,7 +207,7 @@ const useFieldState = params => {
      * Then we merge the value of the modified sections into the reference date.
      * This makes sure that we don't lose some information of the initial date (like the time on a date field).
      */
-    if (newActiveDate != null && utils.isValid(newActiveDate)) {
+    if (utils.isValid(newActiveDate)) {
       const mergedDate = (0, _useField.mergeDateIntoReferenceDate)(utils, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
       values = activeDateManager.getNewValuesFromNewActiveDate(mergedDate);
       shouldPublish = true;

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

@@ -44,8 +44,8 @@ const addPositionPropertiesToSections = (sections, localizedDigits, isRtl) => {
 exports.addPositionPropertiesToSections = addPositionPropertiesToSections;
 const useFieldV6TextField = params => {
   const isRtl = (0, _RtlProvider.useRtl)();
-  const focusTimeoutRef = React.useRef();
-  const selectionSyncTimeoutRef = React.useRef();
+  const focusTimeoutRef = React.useRef(undefined);
+  const selectionSyncTimeoutRef = React.useRef(undefined);
   const {
     forwardedProps: {
       onFocus,

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

@@ -53,7 +53,6 @@ const useMobilePicker = _ref => {
   const labelId = (0, _useId.default)();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    layoutProps,
     providerProps,
     renderCurrentView,
     fieldProps: pickerFieldProps,
@@ -63,7 +62,6 @@ const useMobilePicker = _ref => {
     fieldRef,
     localeText,
     autoFocusView: true,
-    additionalViewProps: {},
     variant: 'mobile'
   }));
   const Field = slots.field;
@@ -136,7 +134,7 @@ const useMobilePicker = _ref => {
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
       slots: slots,
       slotProps: slotProps,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, layoutProps, slotProps?.layout, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
         children: renderCurrentView()