@mui/x-date-pickers 7.7.0 → 7.7.1

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

@@ -119,7 +119,7 @@ export const usePickerValue = ({
   const {
     onAccept,
     onChange,
-    value: inValue,
+    value: inValueWithoutRenderTimezone,
     defaultValue: inDefaultValue,
     closeOnSelect = wrapperVariant === 'desktop',
     timezone: timezoneProp
@@ -129,15 +129,15 @@ export const usePickerValue = ({
   } = React.useRef(inDefaultValue);
   const {
     current: isControlled
-  } = React.useRef(inValue !== undefined);
+  } = React.useRef(inValueWithoutRenderTimezone !== undefined);
 
   /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
   if (process.env.NODE_ENV !== 'production') {
     React.useEffect(() => {
-      if (isControlled !== (inValue !== undefined)) {
+      if (isControlled !== (inValueWithoutRenderTimezone !== undefined)) {
         console.error([`MUI X: A component is changing the ${isControlled ? '' : 'un'}controlled value of a picker to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled value` + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
       }
-    }, [inValue]);
+    }, [inValueWithoutRenderTimezone]);
     React.useEffect(() => {
       if (!isControlled && defaultValue !== inDefaultValue) {
         console.error([`MUI X: A component is changing the defaultValue of an uncontrolled picker after being initialized. ` + `To suppress this warning opt to use a controlled value.`].join('\n'));
@@ -152,10 +152,21 @@ export const usePickerValue = ({
     isOpen,
     setIsOpen
   } = useOpenState(props);
+  const {
+    timezone,
+    value: inValueWithTimezoneToRender,
+    handleValueChange
+  } = useValueWithTimezone({
+    timezone: timezoneProp,
+    value: inValueWithoutRenderTimezone,
+    defaultValue,
+    onChange,
+    valueManager
+  });
   const [dateState, setDateState] = React.useState(() => {
     let initialValue;
-    if (inValue !== undefined) {
-      initialValue = inValue;
+    if (inValueWithTimezoneToRender !== undefined) {
+      initialValue = inValueWithTimezoneToRender;
     } else if (defaultValue !== undefined) {
       initialValue = defaultValue;
     } else {
@@ -165,20 +176,10 @@ export const usePickerValue = ({
       draft: initialValue,
       lastPublishedValue: initialValue,
       lastCommittedValue: initialValue,
-      lastControlledValue: inValue,
+      lastControlledValue: inValueWithTimezoneToRender,
       hasBeenModifiedSinceMount: false
     };
   });
-  const {
-    timezone,
-    handleValueChange
-  } = useValueWithTimezone({
-    timezone: timezoneProp,
-    value: inValue,
-    defaultValue,
-    onChange,
-    valueManager
-  });
   useValidation(_extends({}, props, {
     value: dateState.draft,
     timezone
@@ -200,38 +201,44 @@ export const usePickerValue = ({
       lastCommittedValue: shouldCommit ? action.value : prev.lastCommittedValue,
       hasBeenModifiedSinceMount: true
     }));
-    if (shouldPublish) {
-      const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
-        adapter,
-        value: action.value,
-        props: _extends({}, props, {
+    let cachedContext = null;
+    const getContext = () => {
+      if (!cachedContext) {
+        const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
+          adapter,
           value: action.value,
-          timezone
-        })
-      });
-      const context = {
-        validationError
-      };
-      if (action.name === 'setValueFromShortcut') {
-        context.shortcut = action.shortcut;
+          props: _extends({}, props, {
+            value: action.value,
+            timezone
+          })
+        });
+        cachedContext = {
+          validationError
+        };
+        if (action.name === 'setValueFromShortcut') {
+          cachedContext.shortcut = action.shortcut;
+        }
       }
-      handleValueChange(action.value, context);
+      return cachedContext;
+    };
+    if (shouldPublish) {
+      handleValueChange(action.value, getContext());
     }
     if (shouldCommit && onAccept) {
-      onAccept(action.value);
+      onAccept(action.value, getContext());
     }
     if (shouldClose) {
       setIsOpen(false);
     }
   });
-  if (inValue !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValue))) {
-    const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValue);
+  if (inValueWithTimezoneToRender !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValueWithTimezoneToRender))) {
+    const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValueWithTimezoneToRender);
     setDateState(prev => _extends({}, prev, {
-      lastControlledValue: inValue
+      lastControlledValue: inValueWithTimezoneToRender
     }, isUpdateComingFromPicker ? {} : {
-      lastCommittedValue: inValue,
-      lastPublishedValue: inValue,
-      draft: inValue,
+      lastCommittedValue: inValueWithTimezoneToRender,
+      lastPublishedValue: inValueWithTimezoneToRender,
+      draft: inValueWithTimezoneToRender,
       hasBeenModifiedSinceMount: true
     }));
   }

package/modern/internals/hooks/usePicker/usePickerViews.js

@@ -39,6 +39,7 @@ export const usePickerViews = ({
     onClose
   } = propsFromPickerValue;
   const {
+    view: inView,
     views,
     openTo,
     onViewChange,
@@ -54,7 +55,7 @@ export const usePickerViews = ({
     setFocusedView,
     setValueAndGoToNextView
   } = useViews({
-    view: undefined,
+    view: inView,
     views,
     openTo,
     onChange,

package/modern/locales/daDK.js

@@ -17,11 +17,10 @@ const daDKPickers = {
   // DateRange labels
   start: 'Start',
   end: 'Slut',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Start dato',
+  startTime: 'Start tid',
+  endDate: 'Slut date',
+  endTime: 'Slut tid',
   // Action bar
   cancelButtonLabel: 'Annuller',
   clearButtonLabel: 'Ryd',
@@ -47,8 +46,7 @@ const daDKPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg dato, valgte dato er ${utils.format(value, 'fullDate')}` : 'Vælg dato',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg tidspunkt, valgte tidspunkt er ${utils.format(value, 'fullTime')}` : 'Vælg tidspunkt',
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'ryd felt',
   // Table labels
   timeTableLabel: 'vælg tidspunkt',
   dateTableLabel: 'vælg dato',
@@ -60,19 +58,17 @@ const daDKPickers = {
   fieldHoursPlaceholder: () => 'hh',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'år',
+  month: 'måned',
+  day: 'dag',
+  weekDay: 'ugedag',
+  hours: 'timer',
+  minutes: 'minutter',
+  seconds: 'sekunder',
+  meridiem: 'middag',
   // Common
-  // empty: 'Empty',
+  empty: 'tom'
 };
 export const daDK = getPickersLocalization(daDKPickers);

package/node/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js

@@ -138,6 +138,7 @@ class AdapterDateFnsJalali extends _AdapterDateFnsBase.AdapterDateFnsBase {
       longFormatters: _format.longFormatters,
       lib: 'date-fns-jalali'
     });
+    // TODO: explicit return types can be removed once there is only one date-fns version supported
     this.parse = (value, format) => {
       if (value === '') {
         return null;

package/node/AdapterDateFnsV3/AdapterDateFnsV3.js

@@ -98,6 +98,7 @@ class AdapterDateFns extends _AdapterDateFnsBase.AdapterDateFnsBase {
       formats,
       longFormatters: _format.longFormatters
     });
+    // TODO: explicit return types can be removed once there is only one date-fns version supported
     this.parse = (value, format) => {
       if (value === '') {
         return null;

package/node/DatePicker/DatePicker.js

@@ -176,7 +176,9 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/DateTimePicker/DateTimePicker.js

@@ -214,7 +214,9 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -191,7 +191,9 @@ DesktopDatePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -314,7 +314,9 @@ DesktopDateTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -202,7 +202,9 @@ DesktopTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/MobileDatePicker/MobileDatePicker.js

@@ -188,7 +188,9 @@ MobileDatePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -236,7 +236,9 @@ MobileDateTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/MobileTimePicker/MobileTimePicker.js

@@ -181,7 +181,9 @@ MobileTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -10,6 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -62,6 +63,7 @@ const MultiSectionDigitalClockRoot = (0, _styles.styled)(_PickerViewRoot.PickerV
  */
 const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClock(inProps, ref) {
   const utils = (0, _useUtils.useUtils)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiMultiSectionDigitalClock'
@@ -304,6 +306,17 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
         throw new Error(`Unknown view: ${viewToBuild} found.`);
     }
   }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, handleMeridiemChange]);
+  const viewsToRender = React.useMemo(() => {
+    if (!isRtl) {
+      return views;
+    }
+    const digitViews = views.filter(v => v !== 'meridiem');
+    const result = digitViews.toReversed();
+    if (views.includes('meridiem')) {
+      result.push('meridiem');
+    }
+    return result;
+  }, [isRtl, views]);
   const viewTimeOptions = React.useMemo(() => {
     return views.reduce((result, currentView) => {
       return (0, _extends2.default)({}, result, {
@@ -319,9 +332,9 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
     ownerState: ownerState,
     role: "group"
   }, other, {
-    children: Object.entries(viewTimeOptions).map(([timeView, viewOptions]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultiSectionDigitalClockSection.MultiSectionDigitalClockSection, {
-      items: viewOptions.items,
-      onChange: viewOptions.onChange,
+    children: viewsToRender.map(timeView => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultiSectionDigitalClockSection.MultiSectionDigitalClockSection, {
+      items: viewTimeOptions[timeView].items,
+      onChange: viewTimeOptions[timeView].onChange,
       active: view === timeView,
       autoFocus: autoFocus ?? focusedView === timeView,
       disabled: disabled,

package/node/PickersCalendarHeader/PickersCalendarHeader.js

@@ -252,6 +252,10 @@ process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
    * @default `${adapter.formats.month} ${adapter.formats.year}`
    */
   format: _propTypes.default.string,
+  /**
+   * Id of the calendar text element.
+   * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
+   */
   labelId: _propTypes.default.string,
   maxDate: _propTypes.default.object.isRequired,
   minDate: _propTypes.default.object.isRequired,

package/node/PickersLayout/usePickerLayout.js

@@ -62,7 +62,6 @@ const usePickerLayout = props => {
   const classes = useUtilityClasses(props);
 
   // Action bar
-
   const ActionBar = slots?.actionBar ?? _PickersActionBar.PickersActionBar;
   const actionBarProps = (0, _utils.useSlotProps)({
     elementType: ActionBar,
@@ -82,7 +81,6 @@ const usePickerLayout = props => {
   const actionBar = /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionBar, (0, _extends2.default)({}, actionBarProps));
 
   // Toolbar
-
   const Toolbar = slots?.toolbar;
   const toolbarProps = (0, _utils.useSlotProps)({
     elementType: Toolbar,
@@ -105,11 +103,9 @@ const usePickerLayout = props => {
   const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, toolbarProps)) : null;
 
   // Content
-
   const content = children;
 
   // Tabs
-
   const Tabs = slots?.tabs;
   const tabs = view && Tabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs, (0, _extends2.default)({
     view: view,
@@ -118,7 +114,6 @@ const usePickerLayout = props => {
   }, slotProps?.tabs)) : null;
 
   // Shortcuts
-
   const Shortcuts = slots?.shortcuts ?? _PickersShortcuts.PickersShortcuts;
   const shortcutsProps = (0, _utils.useSlotProps)({
     elementType: Shortcuts,

package/node/StaticDatePicker/StaticDatePicker.js

@@ -142,7 +142,9 @@ StaticDatePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -190,7 +190,9 @@ StaticDateTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/StaticTimePicker/StaticTimePicker.js

@@ -134,7 +134,9 @@ StaticTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/TimePicker/TimePicker.js

@@ -166,7 +166,9 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/index.js

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

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

@@ -18,7 +18,7 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _icons = require("../../../icons");
 var _pickersArrowSwitcherClasses = require("./pickersArrowSwitcherClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel"],
+const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -82,7 +82,8 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
       isPreviousDisabled,
       isPreviousHidden,
       onGoToPrevious,
-      previousLabel
+      previousLabel,
+      labelId
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = props;
@@ -165,6 +166,7 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
     })), children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       variant: "subtitle1",
       component: "span",
+      id: labelId,
       children: children
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersArrowSwitcherSpacer, {
       className: classes.spacer,

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

@@ -115,7 +115,8 @@ const applyLocalizedDigits = (valueStr, localizedDigits) => {
 exports.applyLocalizedDigits = applyLocalizedDigits;
 const isStringNumber = (valueStr, localizedDigits) => {
   const nonLocalizedValueStr = removeLocalizedDigits(valueStr, localizedDigits);
-  return !Number.isNaN(Number(nonLocalizedValueStr));
+  // `Number(' ')` returns `0` even if ' ' is not a valid number.
+  return nonLocalizedValueStr !== ' ' && !Number.isNaN(Number(nonLocalizedValueStr));
 };
 
 /**

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

@@ -127,7 +127,7 @@ const usePickerValue = ({
   const {
     onAccept,
     onChange,
-    value: inValue,
+    value: inValueWithoutRenderTimezone,
     defaultValue: inDefaultValue,
     closeOnSelect = wrapperVariant === 'desktop',
     timezone: timezoneProp
@@ -137,15 +137,15 @@ const usePickerValue = ({
   } = React.useRef(inDefaultValue);
   const {
     current: isControlled
-  } = React.useRef(inValue !== undefined);
+  } = React.useRef(inValueWithoutRenderTimezone !== undefined);
 
   /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
   if (process.env.NODE_ENV !== 'production') {
     React.useEffect(() => {
-      if (isControlled !== (inValue !== undefined)) {
+      if (isControlled !== (inValueWithoutRenderTimezone !== undefined)) {
         console.error([`MUI X: A component is changing the ${isControlled ? '' : 'un'}controlled value of a picker to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled value` + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
       }
-    }, [inValue]);
+    }, [inValueWithoutRenderTimezone]);
     React.useEffect(() => {
       if (!isControlled && defaultValue !== inDefaultValue) {
         console.error([`MUI X: A component is changing the defaultValue of an uncontrolled picker after being initialized. ` + `To suppress this warning opt to use a controlled value.`].join('\n'));
@@ -160,10 +160,21 @@ const usePickerValue = ({
     isOpen,
     setIsOpen
   } = (0, _useOpenState.useOpenState)(props);
+  const {
+    timezone,
+    value: inValueWithTimezoneToRender,
+    handleValueChange
+  } = (0, _useValueWithTimezone.useValueWithTimezone)({
+    timezone: timezoneProp,
+    value: inValueWithoutRenderTimezone,
+    defaultValue,
+    onChange,
+    valueManager
+  });
   const [dateState, setDateState] = React.useState(() => {
     let initialValue;
-    if (inValue !== undefined) {
-      initialValue = inValue;
+    if (inValueWithTimezoneToRender !== undefined) {
+      initialValue = inValueWithTimezoneToRender;
     } else if (defaultValue !== undefined) {
       initialValue = defaultValue;
     } else {
@@ -173,20 +184,10 @@ const usePickerValue = ({
       draft: initialValue,
       lastPublishedValue: initialValue,
       lastCommittedValue: initialValue,
-      lastControlledValue: inValue,
+      lastControlledValue: inValueWithTimezoneToRender,
       hasBeenModifiedSinceMount: false
     };
   });
-  const {
-    timezone,
-    handleValueChange
-  } = (0, _useValueWithTimezone.useValueWithTimezone)({
-    timezone: timezoneProp,
-    value: inValue,
-    defaultValue,
-    onChange,
-    valueManager
-  });
   (0, _useValidation.useValidation)((0, _extends2.default)({}, props, {
     value: dateState.draft,
     timezone
@@ -208,38 +209,44 @@ const usePickerValue = ({
       lastCommittedValue: shouldCommit ? action.value : prev.lastCommittedValue,
       hasBeenModifiedSinceMount: true
     }));
-    if (shouldPublish) {
-      const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
-        adapter,
-        value: action.value,
-        props: (0, _extends2.default)({}, props, {
+    let cachedContext = null;
+    const getContext = () => {
+      if (!cachedContext) {
+        const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
+          adapter,
           value: action.value,
-          timezone
-        })
-      });
-      const context = {
-        validationError
-      };
-      if (action.name === 'setValueFromShortcut') {
-        context.shortcut = action.shortcut;
+          props: (0, _extends2.default)({}, props, {
+            value: action.value,
+            timezone
+          })
+        });
+        cachedContext = {
+          validationError
+        };
+        if (action.name === 'setValueFromShortcut') {
+          cachedContext.shortcut = action.shortcut;
+        }
       }
-      handleValueChange(action.value, context);
+      return cachedContext;
+    };
+    if (shouldPublish) {
+      handleValueChange(action.value, getContext());
     }
     if (shouldCommit && onAccept) {
-      onAccept(action.value);
+      onAccept(action.value, getContext());
     }
     if (shouldClose) {
       setIsOpen(false);
     }
   });
-  if (inValue !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValue))) {
-    const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValue);
+  if (inValueWithTimezoneToRender !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValueWithTimezoneToRender))) {
+    const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValueWithTimezoneToRender);
     setDateState(prev => (0, _extends2.default)({}, prev, {
-      lastControlledValue: inValue
+      lastControlledValue: inValueWithTimezoneToRender
     }, isUpdateComingFromPicker ? {} : {
-      lastCommittedValue: inValue,
-      lastPublishedValue: inValue,
-      draft: inValue,
+      lastCommittedValue: inValueWithTimezoneToRender,
+      lastPublishedValue: inValueWithTimezoneToRender,
+      draft: inValueWithTimezoneToRender,
       hasBeenModifiedSinceMount: true
     }));
   }