@mui/x-date-pickers 8.6.0 → 8.8.0

package/CHANGELOG.md

@@ -5,6 +5,207 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.8.0
+
+_Jul 11, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Chart zoom preview can be enabled
+
+  <img width="758" alt="chart with x-axis preview" src="https://github.com/user-attachments/assets/50ce6f61-16dc-4e9b-a727-ca65d80927d7" />
+
+- 🌎 Add Indonesian (id-ID) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@kennarddh
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @prakhargupta1, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.8.0`
+
+- [DataGrid] Fix `useGridSelector` missing subscription in `React.StrictMode` (#18676) @cherniavskii
+- [DataGrid] Fix scrollbar filler `z-index` (#18688) @KenanYusuf
+- [DataGrid] Set correct data source cache chunk size when pagination is disabled (#18636) @arminmeh
+- [l10n] Add Indonesian (id-ID) locale (#18710) @kennarddh
+
+#### `@mui/x-data-grid-pro@8.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.8.0`, plus:
+
+- [DataGridPro] Fix row ordering not auto-scrolling when moving beyond viewport (#18557) @MBilalShafi
+- [DataGridPro] Set correct parent paths when tree is refreshed with data source tree data and row grouping (#18715) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.8.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.8.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.8.0`
+
+- [charts] Add control to the axis highlight (#17900) @alexfauquette
+- [charts] Avoid processing area plot data if area isn't used in series (#18712) @bernardobelchior
+- [charts] Make smarter default domain limit (#18506) @alexfauquette
+
+#### `@mui/x-charts-pro@8.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.8.0`, plus:
+
+- [charts-pro] Add `funnelDirection` to control pyramid direction (#18568) @JCQuintas
+- [charts-pro] Add `onBeforeExport` callback (#18722) @bernardobelchior
+- [charts-pro] Add chart zoom preview (#18267) @bernardobelchior
+- [charts-pro] Allow customizing scatter preview marker size (#18726) @bernardobelchior
+- [charts-pro] Allow disabling the copy of styles in charts export (#18753) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.8.0`
+
+- [tree view] Fix state update that caused scrolling bug when lazy loading and `checkboxSelection` are enabled (#18749) @rita-codes
+
+#### `@mui/x-tree-view-pro@8.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.8.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.8.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add standalone Pyramid chart page to improve SEO (#18527) @prakhargupta1
+- [docs] Add example to customise line interaction (#18539) @alexfauquette
+- [docs] Fix `size` column filtering in files tree demo (#17952) @cherniavskii
+- [docs] Generate `llms.txt` for X and their products (#18595) @siriwatknp
+- [docs] Improve bar chart demos on mobile (#18721) @alexfauquette
+- [docs] Refine charts overview page (#17447) @noraleonte
+
+### Miscellaneous
+
+- [code-infra] Ensure all `@mui/*` packages are picked by `Material UI` renovate group (#18711) @LukasTy
+- [code-infra] Fix broken CI (#18716) @LukasTy
+- [code-infra] Refactor `prettier` config resolving (#18720) @LukasTy
+- [test] Increase data points in chart benchmarks (#18714) @bernardobelchior
+
+## 8.7.0
+
+_Jul 4, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add `useChartProApiRef` for easier access to the API
+- 📆 Support different start and end `referenceDate` props on range components
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+- 🌎 Improve Greek (el-GR) translations on the Charts
+- 🌎 Improve Danish (da-DK) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@ShahrazH, @vadimkuragkovskiy, @whythecode
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @brijeshb42, @mapache-salvaje, @arminmeh, @bernardobelchior, @bharatkashyap, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.7.0`
+
+- [DataGrid] Fix column state restore with controlled column visibility model (#18567) @arminmeh
+- [DataGrid] Fix styling virtualized column headers (#18603) @KenanYusuf
+- [l10n] Improve Danish (da-DK) locale (#18537) @ShahrazH
+
+#### `@mui/x-data-grid-pro@8.7.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.7.0`.
+
+#### `@mui/x-data-grid-premium@8.7.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.7.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.7.0`
+
+- [pickers] Support different `start` and `end` `referenceDate` props on range components (#18549) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.7.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.7.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.7.0`
+
+- [charts] Export `ChartsReferenceLineProps` (#18598) @bernardobelchior
+- [charts] Extract bar and line plot logic into reusable hooks (#18541) @bernardobelchior
+- [charts] Extract plot logic into separate files for reuse (#18522) @bernardobelchior
+- [charts] Profile charts benchmarks using chromium (#18528) @bernardobelchior
+- [l10n] Add Greek (el-GR) locale to charts (#18548) @whythecode
+
+#### `@mui/x-charts-pro@8.7.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.7.0`, plus:
+
+- [charts-pro] Add `useChartProApiRef` for easier refs (#18013) @JCQuintas
+- [charts-pro] Add tests and classes to zoom slider (#18660) @JCQuintas
+- [charts-pro] Fix geometry not handling gestures in specific scenarios (#18651) @JCQuintas
+- [charts-pro] Rename `useChartApiContext` to `useChartProApiContext` (#18565) @JCQuintas
+- [charts-pro] Zoom pointer improvements (#17480) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.7.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.7.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.7.0`, plus:
+
+- [tree view pro] Add missing `dataSource` JSDoc (#18650) @LukasTy
+
+### Docs
+
+- [docs] Add MCP stub (#18204) @bharatkashyap
+- [docs] Fix AI Assistant proxy rewrite prefix (#18661) @arminmeh
+- [docs] Improve test README.MD (#18634) @LukasTy
+- [docs] Provide workaround for pie chart composition (#18600) @alexfauquette
+- [docs][charts] Add donut chart as a special case of a pie chart (#18652) @bernardobelchior
+- [docs][charts] Centralize country and continent data (#18604) @bernardobelchior
+- [docs][data grid] Audit and revise the Pro row docs (#17926) @mapache-salvaje
+- [docs][pickers] Add mention of theme augmentation in relevant migration section (#18608) @LukasTy
+
+### Core
+
+- [core] Avoid stringifying `document` object (#18657) @vadimkuragkovskiy
+
+### Miscellaneous
+
+- [code-infra] Bump code-infra version and fix breaking changes (#18653) @brijeshb42
+- [code-infra] Ensure `material-ui/disallow-react-api-in-server-components` ESLint rule is applied (#18570) @LukasTy
+- [code-infra] Migrate to flat eslint config (#18562) @brijeshb42
+- [code-infra] Refactor eslint config (#18643) @LukasTy
+- [infra] Add renovatebot rule for latest infra packages (#18609) @Janpot
+- [infra] Move pushArgos script to code-infra (#18667) @Janpot
+- [infra] Updates release script to fetch latest major version from upstream (#18552) @michelengelen
+- [release] Add missing contributor to changelog (#18561) @bernardobelchior
+
 ## 8.6.0
 
 _Jun 27, 2025_
@@ -19,7 +220,7 @@ We'd like to extend a big thank you to the 12 contributors who made this release
 - 🌎 Improve German (de-DE) locale
 
 Special thanks go out to the community members for their valuable contributions:
-@ShahrazH, @vadimka123
+@omalyutin, @ShahrazH, @vadimka123
 
 The following are all team members who have contributed to this release:
 @arminmeh, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @sai6855

package/PickersTextField/PickersInputBase/PickersInputBase.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/esm/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur", "classes", "ownerState"];

package/esm/index.js

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

package/esm/internals/components/PickerFieldUI.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["enableAccessibleFieldDOMStructure"],

package/esm/internals/components/PickerPopper/PickerPopper.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["PaperComponent", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];

package/esm/internals/components/PickerProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { LocalizationProvider } from "../../LocalizationProvider/index.js";
 import { IsValidValueContext } from "../../hooks/useIsValidValue.js";

package/esm/internals/hooks/useClockReferenceDate.js

@@ -18,8 +18,8 @@ export const useClockReferenceDate = ({
     timezone,
     getTodayDate: () => 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/esm/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/esm/internals/hooks/useControlledValue.js

@@ -39,7 +39,7 @@ export const useControlledValue = ({
       return inputTimezone;
     }
     if (referenceDate) {
-      return adapter.getTimezone(referenceDate);
+      return adapter.getTimezone(Array.isArray(referenceDate) ? referenceDate[0] : referenceDate);
     }
     return 'default';
   }, [timezoneProp, inputTimezone, referenceDate, adapter]);

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferFieldSection, PickerManager, PickerValueType } from "../../../models/index.js";
 import { InternalPropNames } from "../../../hooks/useSplitFieldProps.js";
 import type { PickersSectionElement, PickersSectionListRef } from "../../../PickersSectionList/index.js";
-import { FormProps, InferNonNullablePickerValue, PickerValidValue } from "../../models/index.js";
+import { FormProps, InferNonNullablePickerValue, PickerRangeValue, PickerValidValue } from "../../models/index.js";
 export interface UseFieldParameters<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> {
   manager: PickerManager<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, any>;
   props: TProps;
@@ -23,7 +23,7 @@ export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableA
    * 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.
    */
-  referenceDate?: PickerValidDate;
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
   /**
    * Callback fired when the value changes.
    * @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.

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

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';

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

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';

package/esm/internals/hooks/useField/useFieldV7TextField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';

package/esm/internals/hooks/useNullableFieldPrivateContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") PickerFieldPrivateContext.displayName = "PickerFieldPrivateContext";

package/esm/internals/hooks/usePicker/hooks/useOrientation.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { arrayIncludes } from "../../../utils/utils.js";

package/esm/internals/hooks/usePicker/hooks/useValueAndOpenStates.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { warnOnce } from '@mui/x-internals/warning';

package/esm/internals/hooks/usePicker/usePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "sx"];

package/esm/internals/hooks/usePicker/usePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { InferError, OnErrorProps, PickerChangeHandlerContext, PickerOwnerState, PickerValidDate, PickerValueType, TimezoneProps } from "../../../models/index.js";
-import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerValueManager, PickerVariant } from "../../models/index.js";
+import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerRangeValue, PickerValidValue, PickerValueManager, PickerVariant } from "../../models/index.js";
 import { Validator } from "../../../validation/index.js";
 import { UseViewsOptions } from "../useViews.js";
 import { PickerProviderProps } from "../../components/PickerProvider.js";
@@ -48,7 +48,7 @@ export interface UsePickerBaseProps<TValue extends PickerValidValue, TView exten
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate?: PickerValidDate;
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
   /**
    * Force rendering in particular orientation.
    */
@@ -108,7 +108,7 @@ export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextV
   name?: string;
 }
 export interface UsePickerProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<TValue, TView, TError, any>> extends UsePickerBaseProps<TValue, TView, TError, TExternalProps>, UsePickerNonStaticProps {
-  referenceDate?: PickerValidDate;
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
   className?: string;
   sx?: SxProps<Theme>;
 }

package/esm/internals/hooks/useViews.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';

package/esm/internals/models/manager.d.ts

@@ -1,6 +1,6 @@
 import type { MuiPickersAdapter, PickerManager, PickersTimezone, PickerValidDate, PickerValueType } from "../../models/index.js";
 import type { GetDefaultReferenceDateProps } from "../utils/getDefaultReferenceDate.js";
-import { InferNonNullablePickerValue, PickerValidValue } from "./value.js";
+import { InferNonNullablePickerValue, PickerRangeValue, PickerValidValue } from "./value.js";
 import type { UseFieldInternalProps } from "../hooks/useField/index.js";
 export type PickerAnyManager = PickerManager<any, any, any, any, any>;
 type PickerManagerProperties<TManager extends PickerAnyManager> = TManager extends PickerManager<infer TValue, infer TEnableAccessibleFieldDOMStructure, infer TError, infer TValidationProps, infer TFieldInternalProps> ? {
@@ -43,7 +43,7 @@ export interface PickerValueManager<TValue extends PickerValidValue, TError> {
    * @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.
    * Method returning the reference value to use when mounting the component.
    * @param {object} params The params of the method.
-   * @param {PickerValidDate | undefined} params.referenceDate The referenceDate provided by the user.
+   * @param {PickerValidDate | PickerValidDate[] | undefined} params.referenceDate The referenceDate provided by the user.
    * @param {TValue} params.value The value provided by the user.
    * @param {GetDefaultReferenceDateProps} params.props The validation props needed to compute the reference value.
    * @param {MuiPickersAdapter} params.adapter The Picker date adapter instance.
@@ -53,7 +53,7 @@ export interface PickerValueManager<TValue extends PickerValidValue, TError> {
    * @returns {TValue} The reference value to use for non-provided dates.
    */
   getInitialReferenceValue: (params: {
-    referenceDate: PickerValidDate | undefined;
+    referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
     value: TValue;
     props: GetDefaultReferenceDateProps;
     adapter: MuiPickersAdapter;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.6.0
+ * @mui/x-date-pickers v8.8.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/hooks/useClockReferenceDate.js

@@ -25,8 +25,8 @@ const useClockReferenceDate = ({
     timezone,
     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

@@ -46,7 +46,7 @@ const useControlledValue = ({
       return inputTimezone;
     }
     if (referenceDate) {
-      return adapter.getTimezone(referenceDate);
+      return adapter.getTimezone(Array.isArray(referenceDate) ? referenceDate[0] : referenceDate);
     }
     return 'default';
   }, [timezoneProp, inputTimezone, referenceDate, adapter]);

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferFieldSection, PickerManager, PickerValueType } from "../../../models/index.js";
 import { InternalPropNames } from "../../../hooks/useSplitFieldProps.js";
 import type { PickersSectionElement, PickersSectionListRef } from "../../../PickersSectionList/index.js";
-import { FormProps, InferNonNullablePickerValue, PickerValidValue } from "../../models/index.js";
+import { FormProps, InferNonNullablePickerValue, PickerRangeValue, PickerValidValue } from "../../models/index.js";
 export interface UseFieldParameters<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> {
   manager: PickerManager<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, any>;
   props: TProps;
@@ -23,7 +23,7 @@ export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableA
    * 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.
    */
-  referenceDate?: PickerValidDate;
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
   /**
    * Callback fired when the value changes.
    * @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.

package/internals/hooks/useField/useFieldState.js

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

package/internals/hooks/useField/useFieldV6TextField.js

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

package/internals/hooks/useField/useFieldV7TextField.js

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

package/internals/hooks/useNullableFieldPrivateContext.js

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

package/internals/hooks/usePicker/hooks/useOrientation.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/hooks/usePicker/hooks/useValueAndOpenStates.js

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

package/internals/hooks/usePicker/usePicker.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/hooks/usePicker/usePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { InferError, OnErrorProps, PickerChangeHandlerContext, PickerOwnerState, PickerValidDate, PickerValueType, TimezoneProps } from "../../../models/index.js";
-import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerValueManager, PickerVariant } from "../../models/index.js";
+import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerRangeValue, PickerValidValue, PickerValueManager, PickerVariant } from "../../models/index.js";
 import { Validator } from "../../../validation/index.js";
 import { UseViewsOptions } from "../useViews.js";
 import { PickerProviderProps } from "../../components/PickerProvider.js";
@@ -48,7 +48,7 @@ export interface UsePickerBaseProps<TValue extends PickerValidValue, TView exten
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate?: PickerValidDate;
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
   /**
    * Force rendering in particular orientation.
    */
@@ -108,7 +108,7 @@ export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextV
   name?: string;
 }
 export interface UsePickerProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<TValue, TView, TError, any>> extends UsePickerBaseProps<TValue, TView, TError, TExternalProps>, UsePickerNonStaticProps {
-  referenceDate?: PickerValidDate;
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
   className?: string;
   sx?: SxProps<Theme>;
 }

package/internals/hooks/useViews.js

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

package/internals/models/manager.d.ts

@@ -1,6 +1,6 @@
 import type { MuiPickersAdapter, PickerManager, PickersTimezone, PickerValidDate, PickerValueType } from "../../models/index.js";
 import type { GetDefaultReferenceDateProps } from "../utils/getDefaultReferenceDate.js";
-import { InferNonNullablePickerValue, PickerValidValue } from "./value.js";
+import { InferNonNullablePickerValue, PickerRangeValue, PickerValidValue } from "./value.js";
 import type { UseFieldInternalProps } from "../hooks/useField/index.js";
 export type PickerAnyManager = PickerManager<any, any, any, any, any>;
 type PickerManagerProperties<TManager extends PickerAnyManager> = TManager extends PickerManager<infer TValue, infer TEnableAccessibleFieldDOMStructure, infer TError, infer TValidationProps, infer TFieldInternalProps> ? {
@@ -43,7 +43,7 @@ export interface PickerValueManager<TValue extends PickerValidValue, TError> {
    * @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.
    * Method returning the reference value to use when mounting the component.
    * @param {object} params The params of the method.
-   * @param {PickerValidDate | undefined} params.referenceDate The referenceDate provided by the user.
+   * @param {PickerValidDate | PickerValidDate[] | undefined} params.referenceDate The referenceDate provided by the user.
    * @param {TValue} params.value The value provided by the user.
    * @param {GetDefaultReferenceDateProps} params.props The validation props needed to compute the reference value.
    * @param {MuiPickersAdapter} params.adapter The Picker date adapter instance.
@@ -53,7 +53,7 @@ export interface PickerValueManager<TValue extends PickerValidValue, TError> {
    * @returns {TValue} The reference value to use for non-provided dates.
    */
   getInitialReferenceValue: (params: {
-    referenceDate: PickerValidDate | undefined;
+    referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
     value: TValue;
     props: GetDefaultReferenceDateProps;
     adapter: MuiPickersAdapter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "8.6.0",
+  "version": "8.8.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Date and Time Picker components.",
   "main": "./index.js",
@@ -36,12 +36,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@mui/utils": "^7.1.1",
+    "@mui/utils": "^7.2.0",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.6.0"
+    "@mui/x-internals": "8.8.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",