@mui/x-date-pickers 8.5.3 → 8.7.0

package/esm/managers/useDateTimeManager.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import { applyDefaultDate } from "../internals/utils/date-utils.js";
 import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { validateDateTime } from "../validation/index.js";
-import { useDefaultDates, useUtils } from "../internals/hooks/useUtils.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
+import { useDefaultDates } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.js";
 export function useDateTimeManager(parameters = {}) {
   const {
     enableAccessibleFieldDOMStructure = true
@@ -22,32 +22,32 @@ export function useDateTimeManager(parameters = {}) {
   }), [enableAccessibleFieldDOMStructure]);
 }
 function useOpenPickerButtonAriaLabel(value) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const translations = usePickerTranslations();
   return React.useMemo(() => {
-    const formattedValue = utils.isValid(value) ? utils.format(value, 'fullDate') : null;
+    const formattedValue = adapter.isValid(value) ? adapter.format(value, 'fullDate') : null;
     return translations.openDatePickerDialogue(formattedValue);
-  }, [value, translations, utils]);
+  }, [value, translations, adapter]);
 }
 function useApplyDefaultValuesToDateTimeFieldInternalProps(internalProps) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const validationProps = useApplyDefaultValuesToDateTimeValidationProps(internalProps);
-  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  const ampm = React.useMemo(() => internalProps.ampm ?? adapter.is12HourCycleInCurrentLocale(), [internalProps.ampm, adapter]);
   return React.useMemo(() => _extends({}, internalProps, validationProps, {
-    format: internalProps.format ?? (ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h)
-  }), [internalProps, validationProps, ampm, utils]);
+    format: internalProps.format ?? (ampm ? adapter.formats.keyboardDateTime12h : adapter.formats.keyboardDateTime24h)
+  }), [internalProps, validationProps, ampm, adapter]);
 }
 export function useApplyDefaultValuesToDateTimeValidationProps(props) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const defaultDates = useDefaultDates();
   return React.useMemo(() => ({
     disablePast: props.disablePast ?? false,
     disableFuture: props.disableFuture ?? false,
     // TODO: Explore if we can remove it from the public API
     disableIgnoringDatePartForTimeValidation: !!props.minDateTime || !!props.maxDateTime || !!props.disableFuture || !!props.disablePast,
-    minDate: applyDefaultDate(utils, props.minDateTime ?? props.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, props.maxDateTime ?? props.maxDate, defaultDates.maxDate),
+    minDate: applyDefaultDate(adapter, props.minDateTime ?? props.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(adapter, props.maxDateTime ?? props.maxDate, defaultDates.maxDate),
     minTime: props.minDateTime ?? props.minTime,
     maxTime: props.maxDateTime ?? props.maxTime
-  }), [props.minDateTime, props.maxDateTime, props.minTime, props.maxTime, props.minDate, props.maxDate, props.disableFuture, props.disablePast, utils, defaultDates]);
+  }), [props.minDateTime, props.maxDateTime, props.minTime, props.maxTime, props.minDate, props.maxDate, props.disableFuture, props.disablePast, adapter, defaultDates]);
 }

package/esm/managers/useTimeManager.js

@@ -4,8 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { validateTime } from "../validation/index.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.js";
 export function useTimeManager(parameters = {}) {
   const {
     enableAccessibleFieldDOMStructure = true,
@@ -23,22 +22,22 @@ export function useTimeManager(parameters = {}) {
 }
 function createUseOpenPickerButtonAriaLabel(ampm) {
   return function useOpenPickerButtonAriaLabel(value) {
-    const utils = useUtils();
+    const adapter = usePickerAdapter();
     const translations = usePickerTranslations();
     return React.useMemo(() => {
-      const formatKey = ampm ?? utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h';
-      const formattedValue = utils.isValid(value) ? utils.format(value, formatKey) : null;
+      const formatKey = ampm ?? adapter.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h';
+      const formattedValue = adapter.isValid(value) ? adapter.format(value, formatKey) : null;
       return translations.openTimePickerDialogue(formattedValue);
-    }, [value, translations, utils]);
+    }, [value, translations, adapter]);
   };
 }
 function useApplyDefaultValuesToTimeFieldInternalProps(internalProps) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const validationProps = useApplyDefaultValuesToTimeValidationProps(internalProps);
-  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  const ampm = React.useMemo(() => internalProps.ampm ?? adapter.is12HourCycleInCurrentLocale(), [internalProps.ampm, adapter]);
   return React.useMemo(() => _extends({}, internalProps, validationProps, {
-    format: internalProps.format ?? (ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h)
-  }), [internalProps, validationProps, ampm, utils]);
+    format: internalProps.format ?? (ampm ? adapter.formats.fullTime12h : adapter.formats.fullTime24h)
+  }), [internalProps, validationProps, ampm, adapter]);
 }
 export function useApplyDefaultValuesToTimeValidationProps(props) {
   return React.useMemo(() => ({

package/esm/validation/useValidation.d.ts

@@ -1,10 +1,9 @@
-import { MuiPickersAdapterContextValue } from "../LocalizationProvider/LocalizationProvider.js";
-import { OnErrorProps, PickersTimezone } from "../models/index.js";
+import { MuiPickersAdapter, OnErrorProps, PickersTimezone } from "../models/index.js";
 import type { PickerValueManager } from "../internals/models/index.js";
 import { PickerValidValue } from "../internals/models/index.js";
 export type Validator<TValue extends PickerValidValue, TError, TValidationProps> = {
   (params: {
-    adapter: MuiPickersAdapterContextValue;
+    adapter: MuiPickersAdapter;
     value: TValue;
     timezone: PickersTimezone;
     props: TValidationProps;

package/esm/validation/useValidation.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useLocalizationContext } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "../hooks/index.js";
 /**
  * Utility hook to check if a given value is valid based on the provided validation props.
  * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
@@ -22,7 +22,7 @@ export function useValidation(options) {
     timezone,
     onError
   } = options;
-  const adapter = useLocalizationContext();
+  const adapter = usePickerAdapter();
   const previousValidationErrorRef = React.useRef(validator.valueManager.defaultErrorState);
   const validationError = validator({
     adapter,

package/esm/validation/validateDate.js

@@ -30,9 +30,9 @@ export const validateDate = ({
     minDate,
     maxDate
   } = props;
-  const now = adapter.utils.date(undefined, timezone);
+  const now = adapter.date(undefined, timezone);
   switch (true) {
-    case !adapter.utils.isValid(value):
+    case !adapter.isValid(value):
       return 'invalidDate';
     case Boolean(shouldDisableDate && shouldDisableDate(value)):
       return 'shouldDisableDate';
@@ -40,13 +40,13 @@ export const validateDate = ({
       return 'shouldDisableMonth';
     case Boolean(shouldDisableYear && shouldDisableYear(value)):
       return 'shouldDisableYear';
-    case Boolean(disableFuture && adapter.utils.isAfterDay(value, now)):
+    case Boolean(disableFuture && adapter.isAfterDay(value, now)):
       return 'disableFuture';
-    case Boolean(disablePast && adapter.utils.isBeforeDay(value, now)):
+    case Boolean(disablePast && adapter.isBeforeDay(value, now)):
       return 'disablePast';
-    case Boolean(minDate && adapter.utils.isBeforeDay(value, minDate)):
+    case Boolean(minDate && adapter.isBeforeDay(value, minDate)):
       return 'minDate';
-    case Boolean(maxDate && adapter.utils.isAfterDay(value, maxDate)):
+    case Boolean(maxDate && adapter.isAfterDay(value, maxDate)):
       return 'maxDate';
     default:
       return null;

package/esm/validation/validateTime.js

@@ -31,18 +31,18 @@ export const validateTime = ({
     disablePast,
     disableFuture
   } = props;
-  const now = adapter.utils.date(undefined, timezone);
-  const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, adapter.utils);
+  const now = adapter.date(undefined, timezone);
+  const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, adapter);
   switch (true) {
-    case !adapter.utils.isValid(value):
+    case !adapter.isValid(value):
       return 'invalidDate';
     case Boolean(minTime && isAfter(minTime, value)):
       return 'minTime';
     case Boolean(maxTime && isAfter(value, maxTime)):
       return 'maxTime';
-    case Boolean(disableFuture && adapter.utils.isAfter(value, now)):
+    case Boolean(disableFuture && adapter.isAfter(value, now)):
       return 'disableFuture';
-    case Boolean(disablePast && adapter.utils.isBefore(value, now)):
+    case Boolean(disablePast && adapter.isBefore(value, now)):
       return 'disablePast';
     case Boolean(shouldDisableTime && shouldDisableTime(value, 'hours')):
       return 'shouldDisableTime-hours';
@@ -50,7 +50,7 @@ export const validateTime = ({
       return 'shouldDisableTime-minutes';
     case Boolean(shouldDisableTime && shouldDisableTime(value, 'seconds')):
       return 'shouldDisableTime-seconds';
-    case Boolean(minutesStep && adapter.utils.getMinutes(value) % minutesStep !== 0):
+    case Boolean(minutesStep && adapter.getMinutes(value) % minutesStep !== 0):
       return 'minutesStep';
     default:
       return null;

package/hooks/index.d.ts

@@ -3,4 +3,5 @@ export { useSplitFieldProps } from "./useSplitFieldProps.js";
 export { useParsedFormat } from "./useParsedFormat.js";
 export { usePickerContext } from "./usePickerContext.js";
 export { usePickerActionsContext } from "./usePickerActionsContext.js";
-export { useIsValidValue } from "./useIsValidValue.js";
+export { useIsValidValue } from "./useIsValidValue.js";
+export { usePickerAdapter } from "./usePickerAdapter.js";

package/hooks/index.js

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

package/hooks/useParsedFormat.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useParsedFormat = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _useUtils = require("../internals/hooks/useUtils");
+var _usePickerAdapter = require("./usePickerAdapter");
 var _buildSectionsFromFormat = require("../internals/hooks/useField/buildSectionsFromFormat");
 var _useField = require("../internals/hooks/useField/useField.utils");
 var _usePickerTranslations = require("./usePickerTranslations");
@@ -22,16 +22,16 @@ var _useNullablePickerContext = require("../internals/hooks/useNullablePickerCon
  */
 const useParsedFormat = (parameters = {}) => {
   const pickerContext = (0, _useNullablePickerContext.useNullablePickerContext)();
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(utils), [utils]);
+  const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(adapter), [adapter]);
   const {
-    format = pickerContext?.fieldFormat ?? utils.formats.fullDate
+    format = pickerContext?.fieldFormat ?? adapter.formats.fullDate
   } = parameters;
   return React.useMemo(() => {
     const sections = (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
-      utils,
+      adapter,
       format,
       formatDensity: 'dense',
       isRtl,
@@ -43,6 +43,6 @@ const useParsedFormat = (parameters = {}) => {
       enableAccessibleFieldDOMStructure: false
     });
     return sections.map(section => `${section.startSeparator}${section.placeholder}${section.endSeparator}`).join('');
-  }, [utils, isRtl, translations, localizedDigits, format]);
+  }, [adapter, isRtl, translations, localizedDigits, format]);
 };
 exports.useParsedFormat = useParsedFormat;

package/hooks/usePickerAdapter.d.ts

@@ -0,0 +1,7 @@
+import { PickersAdapterContextValue } from "../LocalizationProvider/LocalizationProvider.js";
+import { PickersLocaleText } from "../locales/utils/pickersLocaleTextApi.js";
+export declare const useLocalizationContext: () => UseLocalizationContextReturnValue;
+export interface UseLocalizationContextReturnValue extends Omit<PickersAdapterContextValue, 'localeText'> {
+  localeText: PickersLocaleText;
+}
+export declare const usePickerAdapter: () => import("@mui/x-date-pickers/models").MuiPickersAdapter<any>;

package/hooks/usePickerAdapter.js

@@ -0,0 +1,29 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePickerAdapter = exports.useLocalizationContext = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _enUS = require("../locales/enUS");
+var _LocalizationProvider = require("../LocalizationProvider/LocalizationProvider");
+const useLocalizationContext = () => {
+  const localization = React.useContext(_LocalizationProvider.PickerAdapterContext);
+  if (localization === null) {
+    throw new Error(['MUI X: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
+  }
+  if (localization.adapter === null) {
+    throw new Error(['MUI X: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
+  }
+  const localeText = React.useMemo(() => (0, _extends2.default)({}, _enUS.DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
+  return React.useMemo(() => (0, _extends2.default)({}, localization, {
+    localeText
+  }), [localization, localeText]);
+};
+exports.useLocalizationContext = useLocalizationContext;
+const usePickerAdapter = () => useLocalizationContext().adapter;
+exports.usePickerAdapter = usePickerAdapter;

package/hooks/usePickerTranslations.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePickerTranslations = void 0;
-var _useUtils = require("../internals/hooks/useUtils");
-const usePickerTranslations = () => (0, _useUtils.useLocalizationContext)().localeText;
+var _usePickerAdapter = require("./usePickerAdapter");
+const usePickerTranslations = () => (0, _usePickerAdapter.useLocalizationContext)().localeText;
 exports.usePickerTranslations = usePickerTranslations;

package/index.js

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

package/internals/components/PickerFieldUI.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/internals/components/PickerPopper/PickerPopper.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/internals/components/PickerProvider.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/internals/components/pickersToolbarClasses.d.ts

@@ -8,4 +8,4 @@ export interface PickersToolbarClasses {
 }
 export type PickersToolbarClassKey = keyof PickersToolbarClasses;
 export declare function getPickersToolbarUtilityClass(slot: string): string;
-export declare const pickersToolbarClasses: Record<"root" | "content" | "title", string>;
+export declare const pickersToolbarClasses: Record<"root" | "title" | "content", string>;

package/internals/demo/DemoContainer.d.ts

@@ -1,15 +1,14 @@
 import * as React from 'react';
+import { StackProps } from '@mui/material/Stack';
 import { SxProps, Theme } from '@mui/material/styles';
 interface DemoGridProps {
   children: React.ReactNode;
   components: string[];
   sx?: SxProps<Theme>;
 }
-interface DemoItemProps {
+interface DemoItemProps extends Omit<StackProps, 'component'> {
   label?: React.ReactNode;
   component?: string;
-  children: React.ReactNode;
-  sx?: SxProps<Theme>;
 }
 /**
  * WARNING: This is an internal component used in documentation to achieve a desired layout.

package/internals/demo/DemoContainer.js

@@ -50,7 +50,8 @@ function DemoItem(props) {
     label,
     children,
     component,
-    sx: sxProp
+    sx: sxProp,
+    alignItems = 'stretch'
   } = props;
   let spacing;
   let sx = sxProp;
@@ -66,7 +67,7 @@ function DemoItem(props) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.default, {
     direction: "column",
-    alignItems: "stretch",
+    alignItems: alignItems,
     spacing: spacing,
     sx: sx,
     children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {

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

@@ -8,40 +8,40 @@ exports.useMeridiemMode = useMeridiemMode;
 exports.useNextMonthDisabled = useNextMonthDisabled;
 exports.usePreviousMonthDisabled = usePreviousMonthDisabled;
 var React = _interopRequireWildcard(require("react"));
-var _useUtils = require("./useUtils");
 var _timeUtils = require("../utils/time-utils");
+var _usePickerAdapter = require("../../hooks/usePickerAdapter");
 function useNextMonthDisabled(month, {
   disableFuture,
   maxDate,
   timezone
 }) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   return React.useMemo(() => {
-    const now = utils.date(undefined, timezone);
-    const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
-    return !utils.isAfter(lastEnabledMonth, month);
-  }, [disableFuture, maxDate, month, utils, timezone]);
+    const now = adapter.date(undefined, timezone);
+    const lastEnabledMonth = adapter.startOfMonth(disableFuture && adapter.isBefore(now, maxDate) ? now : maxDate);
+    return !adapter.isAfter(lastEnabledMonth, month);
+  }, [disableFuture, maxDate, month, adapter, timezone]);
 }
 function usePreviousMonthDisabled(month, {
   disablePast,
   minDate,
   timezone
 }) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   return React.useMemo(() => {
-    const now = utils.date(undefined, timezone);
-    const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
-    return !utils.isBefore(firstEnabledMonth, month);
-  }, [disablePast, minDate, month, utils, timezone]);
+    const now = adapter.date(undefined, timezone);
+    const firstEnabledMonth = adapter.startOfMonth(disablePast && adapter.isAfter(now, minDate) ? now : minDate);
+    return !adapter.isBefore(firstEnabledMonth, month);
+  }, [disablePast, minDate, month, adapter, timezone]);
 }
 function useMeridiemMode(date, ampm, onChange, selectionState) {
-  const utils = (0, _useUtils.useUtils)();
-  const cleanDate = React.useMemo(() => !utils.isValid(date) ? null : date, [utils, date]);
-  const meridiemMode = (0, _timeUtils.getMeridiem)(cleanDate, utils);
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
+  const cleanDate = React.useMemo(() => !adapter.isValid(date) ? null : date, [adapter, date]);
+  const meridiemMode = (0, _timeUtils.getMeridiem)(cleanDate, adapter);
   const handleMeridiemChange = React.useCallback(mode => {
-    const timeWithMeridiem = cleanDate == null ? null : (0, _timeUtils.convertToMeridiem)(cleanDate, mode, Boolean(ampm), utils);
+    const timeWithMeridiem = cleanDate == null ? null : (0, _timeUtils.convertToMeridiem)(cleanDate, mode, Boolean(ampm), adapter);
     onChange(timeWithMeridiem, selectionState ?? 'partial');
-  }, [ampm, cleanDate, onChange, selectionState, utils]);
+  }, [ampm, cleanDate, onChange, selectionState, adapter]);
   return {
     meridiemMode,
     handleMeridiemChange

package/internals/hooks/useClockReferenceDate.d.ts

@@ -3,13 +3,13 @@ import { PickerValue } from "../models/index.js";
 export declare const useClockReferenceDate: <TProps extends {}>({
   value,
   referenceDate: referenceDateProp,
-  utils,
+  adapter,
   props,
   timezone
 }: {
   value: PickerValue;
   referenceDate: PickerValidDate | undefined;
-  utils: MuiPickersAdapter;
+  adapter: MuiPickersAdapter;
   props: TProps;
   timezone: PickersTimezone;
 }) => PickerValidDate;

package/internals/hooks/useClockReferenceDate.js

@@ -12,21 +12,21 @@ var _getDefaultReferenceDate = require("../utils/getDefaultReferenceDate");
 const useClockReferenceDate = ({
   value,
   referenceDate: referenceDateProp,
-  utils,
+  adapter,
   props,
   timezone
 }) => {
   const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
     value,
-    utils,
+    adapter,
     props,
     referenceDate: referenceDateProp,
     granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.day,
     timezone,
-    getTodayDate: () => (0, _dateUtils.getTodayDate)(utils, timezone, 'date')
+    getTodayDate: () => (0, _dateUtils.getTodayDate)(adapter, timezone, 'date')
   }),
-  // We only want to compute the reference date on mount.
-  [] // eslint-disable-line react-hooks/exhaustive-deps
+  // We want the `referenceDate` to update on prop and `timezone` change (https://github.com/mui/mui-x/issues/10804)
+  [referenceDateProp, timezone] // eslint-disable-line react-hooks/exhaustive-deps
   );
   return value ?? referenceDate;
 };

package/internals/hooks/useControlledValue.d.ts

@@ -1,4 +1,4 @@
-import type { PickerValueManager } from "../models/index.js";
+import type { PickerRangeValue, PickerValueManager } from "../models/index.js";
 import { PickersTimezone, PickerValidDate } from "../../models/index.js";
 import { PickerValidValue } from "../models/index.js";
 /**
@@ -28,7 +28,7 @@ interface UseValueWithTimezoneParameters<TValue extends PickerValidValue, TChang
    * It does not need to have its default value.
    * This is only used to determine the timezone to use when `props.value` and `props.defaultValue` are not defined.
    */
-  referenceDate: PickerValidDate | undefined;
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
   onChange: TChange | undefined;
   valueManager: PickerValueManager<TValue, any>;
 }

package/internals/hooks/useControlledValue.js

@@ -9,7 +9,7 @@ exports.useControlledValue = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
-var _useUtils = require("./useUtils");
+var _usePickerAdapter = require("../../hooks/usePickerAdapter");
 /**
  * Hooks controlling the value while making sure that:
  * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
@@ -24,19 +24,19 @@ const useControlledValue = ({
   onChange: onChangeProp,
   valueManager
 }) => {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   const [valueWithInputTimezone, setValue] = (0, _useControlled.default)({
     name,
     state: 'value',
     controlled: valueProp,
     default: defaultValue ?? valueManager.emptyValue
   });
-  const inputTimezone = React.useMemo(() => valueManager.getTimezone(utils, valueWithInputTimezone), [utils, valueManager, valueWithInputTimezone]);
+  const inputTimezone = React.useMemo(() => valueManager.getTimezone(adapter, valueWithInputTimezone), [adapter, valueManager, valueWithInputTimezone]);
   const setInputTimezone = (0, _useEventCallback.default)(newValue => {
     if (inputTimezone == null) {
       return newValue;
     }
-    return valueManager.setTimezone(utils, inputTimezone, newValue);
+    return valueManager.setTimezone(adapter, inputTimezone, newValue);
   });
   const timezoneToRender = React.useMemo(() => {
     if (timezoneProp) {
@@ -46,11 +46,11 @@ const useControlledValue = ({
       return inputTimezone;
     }
     if (referenceDate) {
-      return utils.getTimezone(referenceDate);
+      return adapter.getTimezone(Array.isArray(referenceDate) ? referenceDate[0] : referenceDate);
     }
     return 'default';
-  }, [timezoneProp, inputTimezone, referenceDate, utils]);
-  const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, valueWithInputTimezone), [valueManager, utils, timezoneToRender, valueWithInputTimezone]);
+  }, [timezoneProp, inputTimezone, referenceDate, adapter]);
+  const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(adapter, timezoneToRender, valueWithInputTimezone), [valueManager, adapter, timezoneToRender, valueWithInputTimezone]);
   const handleValueChange = (0, _useEventCallback.default)((newValue, ...otherParams) => {
     const newValueWithInputTimezone = setInputTimezone(newValue);
     setValue(newValueWithInputTimezone);

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

@@ -1,7 +1,7 @@
 import { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.js";
 import { PickersLocaleText } from "../../../locales/index.js";
 interface BuildSectionsFromFormatParameters {
-  utils: MuiPickersAdapter;
+  adapter: MuiPickersAdapter;
   format: string;
   formatDensity: 'dense' | 'spacious';
   isRtl: boolean;