@mui/x-date-pickers 6.7.0 → 6.9.0

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -94,7 +94,7 @@ StaticDateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -321,6 +321,14 @@ StaticDateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/StaticTimePicker/StaticTimePicker.js

@@ -205,6 +205,14 @@ StaticTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/TimeClock/TimeClock.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly"];
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_useControlled as useControlled, unstable_useId as useId } from '@mui/utils';
-import useEventCallback from '@mui/utils/useEventCallback';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
 import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
 import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
@@ -16,6 +15,8 @@ import { PickerViewRoot } from '../internals/components/PickerViewRoot';
 import { getTimeClockUtilityClass } from './timeClockClasses';
 import { Clock } from './Clock';
 import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
+import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { uncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -54,8 +55,6 @@ const TimeClockArrowSwitcher = styled(PickersArrowSwitcher, {
  * - [TimeClock API](https://mui.com/x/api/date-pickers/time-clock/)
  */
 export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref) {
-  const localeText = useLocaleText();
-  const now = useNow();
   const utils = useUtils();
   const props = useThemeProps({
     props: inProps,
@@ -89,21 +88,26 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       onFocusedViewChange,
       className,
       disabled,
-      readOnly
+      readOnly,
+      timezone: timezoneProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
   const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
-  const [value, setValue] = useControlled({
-    name: 'DateCalendar',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue != null ? defaultValue : null
-  });
-  const handleValueChange = useEventCallback((newValue, selectionState) => {
-    setValue(newValue);
-    onChange == null ? void 0 : onChange(newValue, selectionState);
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
+    name: 'TimeClock',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: singleItemValueManager
   });
+  const localeText = useLocaleText();
+  const now = useNow(timezone);
   const {
     view,
     setView,
@@ -447,6 +451,14 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/TimeField/TimeField.js

@@ -247,7 +247,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
@@ -320,6 +320,14 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The ref object used to imperatively interact with the field.
    */

package/TimePicker/TimePicker.js

@@ -277,6 +277,14 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
     minutes: PropTypes.number,
     seconds: PropTypes.number
   }),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/YearCalendar/YearCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "value", "defaultValue", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow"];
+const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,6 +11,9 @@ import { PickersYear } from './PickersYear';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
 import { getYearCalendarUtilityClass } from './yearCalendarClasses';
 import { applyDefaultDate } from '../internals/utils/date-utils';
+import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
+import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -51,15 +54,13 @@ const YearCalendarRoot = styled('div', {
   maxHeight: 304
 });
 export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps, ref) {
-  const now = useNow();
-  const theme = useTheme();
-  const utils = useUtils();
   const props = useYearCalendarDefaultizedProps(inProps, 'MuiYearCalendar');
   const {
       autoFocus,
       className,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disabled,
       disableFuture,
       disablePast,
@@ -72,18 +73,37 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       onYearFocus,
       hasFocus,
       onFocusedViewChange,
-      yearsPerRow = 3
+      yearsPerRow = 3,
+      timezone: timezoneProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
-  const [value, setValue] = useControlled({
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
     name: 'YearCalendar',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue != null ? defaultValue : null
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange: onChange,
+    valueManager: singleItemValueManager
   });
-  const selectedDateOrStartOfYear = React.useMemo(() => value != null ? value : utils.startOfYear(now), [now, utils, value]);
+  const now = useNow(timezone);
+  const theme = useTheme();
+  const utils = useUtils();
+  const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
+    value,
+    utils,
+    props,
+    timezone,
+    referenceDate: referenceDateProp,
+    granularity: SECTION_TYPE_GRANULARITY.year
+  }), [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
   const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);
   const selectedYear = React.useMemo(() => {
     if (value != null) {
@@ -92,8 +112,8 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     if (disableHighlightToday) {
       return null;
     }
-    return utils.getYear(now);
-  }, [now, value, utils, disableHighlightToday]);
+    return utils.getYear(referenceDate);
+  }, [value, utils, disableHighlightToday, referenceDate]);
   const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || todayYear);
   const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'YearCalendar',
@@ -120,21 +140,21 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     if (maxDate && utils.isAfterYear(dateToValidate, maxDate)) {
       return true;
     }
-    if (shouldDisableYear && shouldDisableYear(dateToValidate)) {
-      return true;
+    if (!shouldDisableYear) {
+      return false;
     }
-    return false;
+    const yearToValidate = utils.startOfYear(dateToValidate);
+    return shouldDisableYear(yearToValidate);
   }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, utils]);
   const handleYearSelection = useEventCallback((event, year) => {
     if (readOnly) {
       return;
     }
-    const newDate = utils.setYear(selectedDateOrStartOfYear, year);
-    setValue(newDate);
-    onChange == null ? void 0 : onChange(newDate);
+    const newDate = utils.setYear(value != null ? value : referenceDate, year);
+    handleValueChange(newDate);
   });
   const focusYear = useEventCallback(year => {
-    if (!isYearDisabled(utils.setYear(selectedDateOrStartOfYear, year))) {
+    if (!isYearDisabled(utils.setYear(value != null ? value : referenceDate, year))) {
       setFocusedYear(year);
       changeHasFocus(true);
       onYearFocus == null ? void 0 : onYearFocus(year);
@@ -272,7 +292,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
   /**
    * Callback fired when the value changes.
    * @template TDate
-   * @param {TDate | null} value The new value.
+   * @param {TDate} value The new value.
    */
   onChange: PropTypes.func,
   onFocusedViewChange: PropTypes.func,
@@ -281,6 +301,11 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * If `true` picker is readonly
    */
   readOnly: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid year using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Disable specific year.
    * @template TDate
@@ -292,6 +317,14 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/YearCalendar/YearCalendar.types.d.ts

@@ -2,6 +2,7 @@ import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { YearCalendarClasses } from './yearCalendarClasses';
 import { BaseDateValidationProps, YearValidationProps } from '../internals/models/validation';
+import { TimezoneProps } from '../models';
 export interface ExportedYearCalendarProps {
     /**
      * Years rendered per row.
@@ -9,7 +10,7 @@ export interface ExportedYearCalendarProps {
      */
     yearsPerRow?: 3 | 4;
 }
-export interface YearCalendarProps<TDate> extends ExportedYearCalendarProps, YearValidationProps<TDate>, BaseDateValidationProps<TDate> {
+export interface YearCalendarProps<TDate> extends ExportedYearCalendarProps, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimezoneProps {
     autoFocus?: boolean;
     /**
      * className applied to the root element.
@@ -35,10 +36,15 @@ export interface YearCalendarProps<TDate> extends ExportedYearCalendarProps, Yea
      * Used when the component is not controlled.
      */
     defaultValue?: TDate | null;
+    /**
+     * The date used to generate the new value when both `value` and `defaultValue` are empty.
+     * @default The closest valid year using the validation props, except callbacks such as `shouldDisableDate`.
+     */
+    referenceDate?: TDate;
     /**
      * Callback fired when the value changes.
      * @template TDate
-     * @param {TDate | null} value The new value.
+     * @param {TDate} value The new value.
      */
     onChange?: (value: TDate) => void;
     /** If `true` picker is readonly */

package/dateTimeViewRenderers/dateTimeViewRenderers.d.ts

@@ -10,4 +10,4 @@ export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps
     focusedView: DateOrTimeViewWithMeridiem | null;
     timeViewsCount: number;
 }
-export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, shouldDisableClock, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;
+export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, shouldDisableClock, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;

package/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -54,6 +54,7 @@ export const renderDesktopDateTimeView = ({
   autoFocus,
   fixedWeekNumber,
   displayWeekNumber,
+  timezone,
   disableIgnoringDatePartForTimeValidation,
   timeSteps,
   skipDisabled,
@@ -101,7 +102,8 @@ export const renderDesktopDateTimeView = ({
         sx: sx,
         autoFocus: autoFocus,
         fixedWeekNumber: fixedWeekNumber,
-        displayWeekNumber: displayWeekNumber
+        displayWeekNumber: displayWeekNumber,
+        timezone: timezone
       }), timeViewsCount > 0 && /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx(Divider, {
           orientation: "vertical"
@@ -140,7 +142,8 @@ export const renderDesktopDateTimeView = ({
           autoFocus: autoFocus,
           disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
           timeSteps: timeSteps,
-          skipDisabled: skipDisabled
+          skipDisabled: skipDisabled,
+          timezone: timezone
         })]
       })]
     }), isActionBarVisible && /*#__PURE__*/_jsx(Divider, {})]

package/dateViewRenderers/dateViewRenderers.d.ts

@@ -8,4 +8,4 @@ export interface DateViewRendererProps<TDate, TView extends DateOrTimeViewWithMe
     views: readonly TView[];
     focusedView: TView | null;
 }
-export declare const renderDateViewCalendar: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
+export declare const renderDateViewCalendar: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;

package/dateViewRenderers/dateViewRenderers.js

@@ -40,7 +40,8 @@ export const renderDateViewCalendar = ({
   sx,
   autoFocus,
   fixedWeekNumber,
-  displayWeekNumber
+  displayWeekNumber,
+  timezone
 }) => /*#__PURE__*/_jsx(DateCalendar, {
   view: view,
   onViewChange: onViewChange,
@@ -79,5 +80,6 @@ export const renderDateViewCalendar = ({
   sx: sx,
   autoFocus: autoFocus,
   fixedWeekNumber: fixedWeekNumber,
-  displayWeekNumber: displayWeekNumber
+  displayWeekNumber: displayWeekNumber,
+  timezone: timezone
 });

package/index.js

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

package/internals/hooks/date-helpers-hooks.d.ts

@@ -1,13 +1,15 @@
 import { PickerOnChangeFn } from './useViews';
 import { PickerSelectionState } from './usePicker';
+import { PickersTimezone } from '../../models';
 interface MonthValidationOptions<TDate> {
     disablePast?: boolean;
     disableFuture?: boolean;
     minDate: TDate;
     maxDate: TDate;
+    timezone: PickersTimezone;
 }
-export declare function useNextMonthDisabled<TDate>(month: TDate, { disableFuture, maxDate }: Pick<MonthValidationOptions<TDate>, 'disableFuture' | 'maxDate'>): boolean;
-export declare function usePreviousMonthDisabled<TDate>(month: TDate, { disablePast, minDate }: Pick<MonthValidationOptions<TDate>, 'disablePast' | 'minDate'>): boolean;
+export declare function useNextMonthDisabled<TDate>(month: TDate, { disableFuture, maxDate, timezone, }: Pick<MonthValidationOptions<TDate>, 'disableFuture' | 'maxDate' | 'timezone'>): boolean;
+export declare function usePreviousMonthDisabled<TDate>(month: TDate, { disablePast, minDate, timezone, }: Pick<MonthValidationOptions<TDate>, 'disablePast' | 'minDate' | 'timezone'>): boolean;
 export declare function useMeridiemMode<TDate>(date: TDate | null, ampm: boolean | undefined, onChange: PickerOnChangeFn<TDate>, selectionState?: PickerSelectionState): {
     meridiemMode: import("../utils/time-utils").Meridiem | null;
     handleMeridiemChange: (mode: 'am' | 'pm') => void;

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

@@ -3,25 +3,27 @@ import { useUtils } from './useUtils';
 import { getMeridiem, convertToMeridiem } from '../utils/time-utils';
 export function useNextMonthDisabled(month, {
   disableFuture,
-  maxDate
+  maxDate,
+  timezone
 }) {
   const utils = useUtils();
   return React.useMemo(() => {
-    const now = utils.date();
+    const now = utils.dateWithTimezone(undefined, timezone);
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
     return !utils.isAfter(lastEnabledMonth, month);
-  }, [disableFuture, maxDate, month, utils]);
+  }, [disableFuture, maxDate, month, utils, timezone]);
 }
 export function usePreviousMonthDisabled(month, {
   disablePast,
-  minDate
+  minDate,
+  timezone
 }) {
   const utils = useUtils();
   return React.useMemo(() => {
-    const now = utils.date();
+    const now = utils.dateWithTimezone(undefined, timezone);
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     return !utils.isBefore(firstEnabledMonth, month);
-  }, [disablePast, minDate, month, utils]);
+  }, [disablePast, minDate, month, utils, timezone]);
 }
 export function useMeridiemMode(date, ampm, onChange, selectionState) {
   const utils = useUtils();

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -36,6 +36,7 @@ export const useDesktopPicker = _ref => {
     sx,
     format,
     formatDensity,
+    timezone,
     label,
     inputRef,
     readOnly,
@@ -100,6 +101,7 @@ export const useDesktopPicker = _ref => {
       sx,
       format,
       formatDensity,
+      timezone,
       label,
       autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined

package/internals/hooks/useField/useField.d.ts

@@ -1,3 +1,5 @@
 import { UseFieldParams, UseFieldResponse, UseFieldForwardedProps, UseFieldInternalProps } from './useField.types';
 import { FieldSection } from '../../../models';
-export declare const useField: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => UseFieldResponse<TForwardedProps>;
+export declare const useField: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, any> & {
+    minutesStep?: number | undefined;
+}>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => UseFieldResponse<TForwardedProps>;

package/internals/hooks/useField/useField.js

@@ -24,14 +24,16 @@ export const useField = params => {
     updateValueFromValueStr,
     setTempAndroidValueStr,
     sectionsValueBoundaries,
-    placeholder
+    placeholder,
+    timezone
   } = useFieldState(params);
   const {
       inputRef: inputRefProp,
       internalProps,
       internalProps: {
         readOnly = false,
-        unstableFieldRef
+        unstableFieldRef,
+        minutesStep
       },
       forwardedProps: {
         onClick,
@@ -54,7 +56,8 @@ export const useField = params => {
     sections: state.sections,
     updateSectionValue,
     sectionsValueBoundaries,
-    setTempAndroidValueStr
+    setTempAndroidValueStr,
+    timezone
   });
   const inputRef = React.useRef(null);
   const handleRef = useForkRef(inputRefProp, inputRef);
@@ -96,7 +99,7 @@ export const useField = params => {
     onFocus == null ? void 0 : onFocus(...args);
     // The ref is guaranteed to be resolved at this point.
     const input = inputRef.current;
-    clearTimeout(focusTimeoutRef.current);
+    window.clearTimeout(focusTimeoutRef.current);
     focusTimeoutRef.current = setTimeout(() => {
       // The ref changed, the component got remounted, the focus event is no longer relevant.
       if (!input || input !== inputRef.current) {
@@ -143,6 +146,7 @@ export const useField = params => {
       }
     }
     event.preventDefault();
+    resetCharacterQuery();
     updateValueFromValueStr(pastedValue);
   });
   const handleInputChange = useEventCallback(event => {
@@ -267,7 +271,9 @@ export const useField = params => {
           }
           const activeSection = state.sections[selectedSectionIndexes.startIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = adjustSectionValue(utils, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date);
+          const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date, {
+            minutesStep
+          });
           updateSectionValue({
             activeSection,
             newSectionValue,
@@ -278,6 +284,9 @@ export const useField = params => {
     }
   });
   useEnhancedEffect(() => {
+    if (!inputRef.current) {
+      return;
+    }
     if (selectedSectionIndexes == null) {
       if (inputRef.current.scrollLeft) {
         // Ensure that input content is not marked as selected.
@@ -301,7 +310,7 @@ export const useField = params => {
       // On multi input range pickers we want to update selection range only for the active input
       // This helps avoiding the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
       // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
-      if (inputRef.current && inputRef.current === getActiveElement(document)) {
+      if (inputRef.current === getActiveElement(document)) {
         inputRef.current.setSelectionRange(selectionStart, selectionEnd);
       }
       // Even reading this variable seems to do the trick, but also setting it just to make use of it
@@ -309,7 +318,8 @@ export const useField = params => {
     }
   });
   const validationError = useValidation(_extends({}, internalProps, {
-    value: state.value
+    value: state.value,
+    timezone
   }), validator, valueManager.isSameError, valueManager.defaultErrorState);
   const inputError = React.useMemo(() => {
     // only override when `error` is undefined.
@@ -319,6 +329,12 @@ export const useField = params => {
     }
     return valueManager.hasError(validationError);
   }, [valueManager, validationError, error]);
+  React.useEffect(() => {
+    if (!inputError && !selectedSectionIndexes) {
+      resetCharacterQuery();
+    }
+  }, [state.referenceValue, selectedSectionIndexes, inputError]); // eslint-disable-line react-hooks/exhaustive-deps
+
   React.useEffect(() => {
     // Select the right section when focused on mount (`autoFocus = true` on the input)
     if (inputRef.current && inputRef.current === document.activeElement) {

package/internals/hooks/useField/useField.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, FieldSectionContentType, FieldValueType } from '../../../models';
+import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, FieldValueType, PickersTimezone } from '../../../models';
 import type { PickerValueManager } from '../usePicker';
 import { InferError, Validator } from '../useValidation';
 export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, any>> {
@@ -11,7 +11,7 @@ export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TF
     validator: Validator<TValue, TDate, InferError<TInternalProps>, UseFieldValidationProps<TValue, TInternalProps>>;
     valueType: FieldValueType;
 }
-export interface UseFieldInternalProps<TValue, TDate, TSection extends FieldSection, TError> {
+export interface UseFieldInternalProps<TValue, TDate, TSection extends FieldSection, TError> extends TimezoneProps {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -22,7 +22,7 @@ export interface UseFieldInternalProps<TValue, TDate, TSection extends FieldSect
      */
     defaultValue?: TValue;
     /**
-     * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+     * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
      * For example, on time fields it will be used to determine the date to set.
      * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
      */
@@ -266,8 +266,10 @@ export interface UseFieldState<TValue, TSection extends FieldSection> {
 export type UseFieldValidationProps<TValue, TInternalProps extends {
     value?: TValue;
     defaultValue?: TValue;
-}> = Omit<TInternalProps, 'value' | 'defaultValue'> & {
+    timezone?: PickersTimezone;
+}> = Omit<TInternalProps, 'value' | 'defaultValue' | 'timezone'> & {
     value: TValue;
+    timezone: PickersTimezone;
 };
 export type AvailableAdjustKeyCode = 'ArrowUp' | 'ArrowDown' | 'PageUp' | 'PageDown' | 'Home' | 'End';
 export type SectionNeighbors = {