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

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,17 +157,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: _propTypes.default.bool,
-  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,
@@ -174,16 +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']),
-  /**
-   * 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,
   /**
    * The props used for each component slot.
    * @default {}
@@ -198,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,9 +57,6 @@ const usePickerLayout = props => {
     onChange,
     onSelectShortcut,
     isValid,
-    isLandscape,
-    disabled,
-    readOnly,
     children,
     slots,
     slotProps,
@@ -63,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);
 
@@ -79,7 +81,7 @@ const usePickerLayout = props => {
       onClear,
       onCancel,
       onSetToday,
-      actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
+      actions: variant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
     ownerState
@@ -92,14 +94,13 @@ const usePickerLayout = props => {
     elementType: Toolbar,
     externalSlotProps: slotProps?.toolbar,
     additionalProps: {
-      isLandscape,
+      isLandscape: orientation === 'landscape',
+      // Will be removed in a follow up PR?
       onChange,
       value,
       view,
       onViewChange,
-      views,
-      disabled,
-      readOnly
+      views
     },
     className: classes.toolbar,
     ownerState
@@ -124,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,
@@ -136,7 +138,8 @@ const usePickerLayout = props => {
     content,
     tabs,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   };
 };
 var _default = exports.default = usePickerLayout;

package/node/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -22,7 +22,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _pickersInputBaseClasses = require("./pickersInputBaseClasses");
 var _PickersSectionList = require("../../PickersSectionList");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur"];
 const round = value => Math.round(value * 1e5) / 1e5;
 const PickersInputBaseRoot = exports.PickersInputBaseRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersInputBase',
@@ -202,7 +202,9 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       readOnly,
       inputProps,
       inputRef,
-      sectionListRef
+      sectionListRef,
+      onFocus,
+      onBlur
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootRef = React.useRef(null);
@@ -214,13 +216,12 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
   }
   const handleInputFocus = event => {
-    // Fix a bug with IE11 where the focus/blur events are triggered
-    // while the component is disabled.
-    if (muiFormControl.disabled) {
-      event.stopPropagation();
-      return;
-    }
     muiFormControl.onFocus?.(event);
+    onFocus?.(event);
+  };
+  const handleInputBlur = event => {
+    muiFormControl.onBlur?.(event);
+    onBlur?.(event);
   };
   React.useEffect(() => {
     if (muiFormControl) {
@@ -262,7 +263,7 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       tabIndex: tabIndex,
       className: classes.sectionsContainer,
       onFocus: handleInputFocus,
-      onBlur: muiFormControl.onBlur,
+      onBlur: handleInputBlur,
       onInput: onInput,
       onPaste: onPaste,
       onKeyDown: onKeyDown,

package/node/PickersTextField/PickersTextField.js

@@ -112,8 +112,6 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
     className: (0, _clsx.default)(classes.root, className),
     ref: handleRootRef,
     focused: focused,
-    onFocus: onFocus,
-    onBlur: onBlur,
     disabled: disabled,
     variant: variant,
     error: error,
@@ -135,6 +133,8 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       onKeyUp: onKeyUp,
       onInput: onInput,
       onPaste: onPaste,
+      onFocus: onFocus,
+      onBlur: onBlur,
       endAdornment: endAdornment,
       startAdornment: startAdornment,
       tabIndex: tabIndex,

package/node/TimeClock/Clock.js

@@ -230,6 +230,7 @@ function Clock(inProps) {
       setTime(event, 'finish');
       isMoving.current = false;
     }
+    event.preventDefault();
   };
   const handleMouseMove = event => {
     // event.buttons & PRIMARY_MOUSE_BUTTON

package/node/TimeClock/TimeClock.js

@@ -114,6 +114,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });

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/TimePicker/TimePickerToolbar.js

@@ -24,8 +24,9 @@ var _useUtils = require("../internals/hooks/useUtils");
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _timePickerToolbarClasses = require("./timePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className"];
 const useUtilityClasses = ownerState => {
   const {
     isLandscape,
@@ -135,14 +136,16 @@ function TimePickerToolbar(inProps) {
       view,
       onViewChange,
       views,
-      disabled,
-      readOnly,
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const isRtl = (0, _RtlProvider.useRtl)();
+  const {
+    disabled,
+    readOnly
+  } = (0, _hooks.usePickerContext)();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
     meridiemMode,
@@ -223,12 +226,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: _propTypes.default.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -242,12 +239,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: _propTypes.default.func.isRequired,
-  /**
-   * 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,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/YearCalendar/YearCalendar.js

@@ -111,6 +111,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });

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.0
+ * @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/PickerProvider.js

@@ -15,7 +15,9 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
     isPickerDisabled: false,
     isPickerReadOnly: false,
     isPickerValueEmpty: false,
-    isPickerOpen: false
+    isPickerOpen: false,
+    pickerVariant: 'desktop',
+    pickerOrientation: 'portrait'
   }
 });
 

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/components/PickersToolbar.js

@@ -18,13 +18,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
 const useUtilityClasses = ownerState => {
   const {
-    classes,
-    isLandscape
+    classes
   } = ownerState;
   const slots = {
     root: ['root'],
-    content: ['content'],
-    penIconButton: ['penIconButton', isLandscape && 'penIconButtonLandscape']
+    content: ['content']
   };
   return (0, _composeClasses.default)(slots, _pickersToolbarClasses.getPickersToolbarUtilityClass, classes);
 };

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

@@ -74,7 +74,7 @@ const useDesktopPicker = _ref => {
     localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'desktop'
+    variant: 'desktop'
   }));
   const InputAdornment = slots.inputAdornment ?? _InputAdornment.default;
   const _useSlotProps = (0, _useSlotProps3.default)({

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

@@ -49,6 +49,7 @@ const useFieldState = params => {
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager
   });
@@ -71,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/useField/useFieldV7TextField.js

@@ -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/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/useMobilePicker/useMobilePicker.js

@@ -66,7 +66,7 @@ const useMobilePicker = _ref => {
     localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'mobile'
+    variant: 'mobile'
   }));
   const Field = slots.field;
   const fieldProps = (0, _useSlotProps.default)({