@mui/x-date-pickers 8.0.0-alpha.5 → 8.0.0-alpha.7

package/AdapterMoment/AdapterMoment.d.ts

@@ -57,7 +57,7 @@ export declare class AdapterMoment implements MuiPickersAdapter<string> {
     getCurrentLocaleCode: () => string;
     is12HourCycleInCurrentLocale: () => boolean;
     expandFormat: (format: string) => string;
-    isValid: (value: Moment | null) => boolean;
+    isValid: (value: Moment | null) => value is Moment;
     format: (value: Moment, formatKey: keyof AdapterFormats) => string;
     formatByString: (value: Moment, formatString: string) => string;
     formatNumber: (numberToFormat: string) => string;

package/CHANGELOG.md

@@ -5,6 +5,211 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.7
+
+_Jan 9, 2025_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Charts legend is now an HTML element which can be styled more easily
+- 💫 Support [aggregation with server-side data](/x/react-data-grid/server-side-data/aggregation/)
+- 🏎️ Improve Data Grid aggregation performance
+- 🌍 Add Chinese (Taiwan) (zh-TW) locale on the Date and Time Pickers
+- 🌍 Improve Norwegian (nb-NO) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@derek-0000, @josteinjhauge, @k-rajat19, @nusr, @tomashauser.
+Following are all team members who have contributed to this release:
+@cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @arminmeh, @romgrk, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-alpha.7`
+
+- [DataGrid] Improve React 19 support (#15769) @LukasTy
+- [DataGrid] Add `name` attribute to the checkbox selection column (#15178) @derek-0000
+- [DataGrid] Fix number filter field formatting values while typing (#16062) @arminmeh
+- [DataGrid] Fix select all checkbox state reset with server side data (#16034) @MBilalShafi
+- [DataGrid] Refactor: create base button props (#15930) @romgrk
+- [DataGrid] Refactor: create tooltip props (#16086) @romgrk
+- [DataGrid] Fix TS error (#16046) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.7` [![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.0.0-alpha.7`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.7` [![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.0.0-alpha.7`, plus:
+
+- [DataGridPremium] Improve aggregation performance for multiple columns (#16097) @cherniavskii
+- [DataGridPremium] Make Aggregation keyboard accessible in the column menu (#15934) @k-rajat19
+- [DataGridPremium] Server-side aggregation with data source (#15741) @MBilalShafi
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `date-fns` and `date-fns-jalali` date library adapters have been renamed to better align with the current stable major versions — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#✅-rename-date-fns-adapter-imports)
+- Update default `closeOnSelect` and Action Bar `actions` values - [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#update-default-closeonselect-and-action-bar-actions-values)
+- The component passed to the `layout` slot no longer receives the `value`, `onChange` and `onSelectShortcut` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
+- The component passed to the `toolbar` slot no longer receives the `value`, `onChange` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
+- The component passed to the `shortcuts` slot no longer receives the `onChange`, `isValid` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-shortcuts).
+- The `PickerShortcutChangeImportance` type has been renamed `PickerChangeImportance` — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#renamed-variables-and-types).
+- The component passed to the `layout` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
+- The component passed to the `toolbar` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
+- The component passed to the `tabs` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-tabs).
+
+#### `@mui/x-date-pickers@8.0.0-alpha.7`
+
+- [fields] Handle focusing container with `inputRef.current.focus` on `accessibleFieldDOMStructure` (#15985) @LukasTy
+- [pickers] Always use `setValue` internally to update the picker value (#16056) @flaviendelangle
+- [pickers] Create a new context to pass the range position props to the layout components and to the views (#15846) @flaviendelangle
+- [pickers] Introduce a new concept of `manager` (#15339) @flaviendelangle
+- [pickers] Improve React 19 support (#15769) @LukasTy
+- [pickers] Memoize `<PickersActionBar />` (#16071) @LukasTy
+- [pickers] Remove `NonEmptyDateRange` type (#16035) @flaviendelangle
+- [pickers] Rename `AdapterDateFns` into `AdapterDateFnsV2` and `AdapterDateFnsV3` into `AdapterDateFns` (#16082) @LukasTy
+- [pickers] Rename `ctx.onViewChange` to `ctx.setView` and add it to the actions context (#16044) @flaviendelangle
+- [pickers] Support `date-fns-jalali` v4 (#16011) @LukasTy
+- [pickers] Update `closeOnSelect` and `actionBar.actions` default values (#15944) @LukasTy
+- [pickers] Use `usePickerContext()` and `usePickerActionsContext()` instead of passing props to the `shortcuts` and `toolbar` slots (#15948) @flaviendelangle
+- [l10n] Add Chinese (Taiwan) (zh-TW) locale (#16033) @nusr
+- [l10n] Improve Norwegian (nb-NO) locale (#16089) @josteinjhauge
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.7` [![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.0.0-alpha.7`.
+
+### Charts
+
+#### Breaking changes
+
+- Removed `DefaultChartsLegend` component, since it is now easier to create custom legends — [Learn more](https://next.mui.com/x/react-charts/components/#html-components).
+- The default legend is now an HTML element and can be styled more easily.
+- The `width` and `height` properties of the charts now only apply to the `svg` element, and not their wrappers, this might cause some layout shifts.
+- `slotProps.legend.direction` now accepts `'horizontal' | 'vertical'` instead of `'row' | 'column'` — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#legend-direction-value-change-✅).
+- The `getSeriesToDisplay` function was removed in favor of the `useLegend` hook. — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#the-getseriestodisplay-function-was-removed).
+
+#### `@mui/x-charts@8.0.0-alpha.7`
+
+- [charts] New HTML legend & styles (#15733) @JCQuintas
+- [charts] Improve React 19 support (#15769) @LukasTy
+- [charts] Fix 301 redirection in the API documentation @oliviertassinari
+
+#### `@mui/x-charts-pro@8.0.0-alpha.7` [![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.0.0-alpha.7`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.7`
+
+- [TreeView] Improve React 19 support (#15769) @LukasTy
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.7` [![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.0.0-alpha.7`.
+
+### Docs
+
+- [docs] Fix `EditingWithDatePickers` demo (#15967) @k-rajat19
+- [docs] Fix inconsistent multi input range field separators (#16043) @flaviendelangle
+- [docs] Fix non-existing "adapter" property of `LocalizationProvider` (#16084) @tomashauser
+- [docs] Refactor Data Grid with Date Pickers example (#15992) @LukasTy
+- [docs] Unify the wording of the pickers slots breaking changes (#16036) @flaviendelangle
+
+### Core
+
+- [core] Clarify the release strategy (#16014) @MBilalShafi
+- [core] Small fixes on docs @oliviertassinari
+- [core] Sync with other repos @oliviertassinari
+- [core] Update the `release:version` docs (#16038) @cherniavskii
+- [code-infra] Add `testSkipIf` and `describeSkipIf` (#16049) @JCQuintas
+- [test] Stabilize flaky Data Grid tests (#16053) @LukasTy
+
+## 8.0.0-alpha.6
+
+_Dec 26, 2024_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🏎️ Improve Data Grid scrolling performance
+- 🌍 Improve Dutch (nl-NL) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@JoepVerkoelen, @k-rajat19, @lauri865.
+Following are all team members who have contributed to this release:
+@flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The `sanitizeFilterItemValue()` utility is not exported anymore.
+
+#### `@mui/x-data-grid@8.0.0-alpha.6`
+
+- [DataGrid] Avoid subscribing to `renderContext` state in grid root for better scroll performance (#15986) @lauri865
+- [DataGrid] Fix header filters showing clear button while empty (#15829) @k-rajat19
+- [DataGrid] Improve test coverage of server side data source (#15942) @MBilalShafi
+- [DataGrid] Move progress components to leaf import (#15914) @romgrk
+- [DataGrid] Move skeleton to leaf import (#15931) @romgrk
+- [DataGrid] Replace `forwardRef` with a shim for forward compatibility (#15955) @lauri865
+- [l10n] Improve Dutch (nl-NL) locale (#15994) @JoepVerkoelen
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.6` [![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.0.0-alpha.6`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.6` [![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.0.0-alpha.6`, plus:
+
+- [DataGridPremium] Fix column unpinning with row grouping (#15908) @k-rajat19
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-alpha.6`
+
+- [pickers] Use `usePickerContext()` and `usePickerActionsContext()` to get the actions in the `actionBar` slot and in internal components (#15843) @flaviendelangle
+- [pickers] Use `usePickerContext()` to get the view-related props in the layout, toolbar and tabs slots (#15606) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.6` [![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.0.0-alpha.6`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.6`
+
+No changes since `@mui/x-charts@v8.0.0-alpha.5`.
+
+#### `@mui/x-charts-pro@8.0.0-alpha.6` [![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.0.0-alpha.6`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.6`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.5`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.6` [![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.0.0-alpha.6`.
+
+### Docs
+
+- [docs] Remove production profiler from docs build (#15959) @lauri865
+- [code-infra] Add new `next-env.d.ts` changes (#15947) @JCQuintas
+
 ## 8.0.0-alpha.5
 
 _Dec 19, 2024_
@@ -25,7 +230,7 @@ Following are all team members who have contributed to this release:
 
 #### Breaking changes
 
-- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`.
+- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`:
 
   - For `.root` element, use `slotProps.root`.
   - For `.main` element (the one with `role="grid"`), use `slotProps.main`.

package/DateCalendar/DateCalendar.js

@@ -260,7 +260,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     return handleValueChange(day, 'finish', view);
   });
   React.useEffect(() => {
-    if (value != null && utils.isValid(value)) {
+    if (utils.isValid(value)) {
       changeMonth(value);
     }
   }, [value]); // eslint-disable-line

package/DateCalendar/PickersFadeTransitionGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
 export interface PickersFadeTransitionGroupProps {
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
     className?: string;
     reduceAnimations: boolean;
     transKey: React.Key;

package/DateCalendar/PickersSlideTransition.d.ts

@@ -9,7 +9,7 @@ export interface ExportedSlideTransitionProps {
     classes?: Partial<PickersSlideTransitionClasses>;
 }
 export interface SlideTransitionProps extends Omit<CSSTransitionProps, 'timeout'>, ExportedSlideTransitionProps {
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
     className?: string;
     reduceAnimations: boolean;
     slideDirection: SlideDirection;

package/DateField/useDateField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateFieldProps } from './DateField.types';
-export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseDateFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps> & Required<Pick<UseDateFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "timezone" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | keyof import("../internals").BaseDateValidationProps | "dateSeparator">>;
+export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "onChange" | "onError" | "format" | "timezone" | keyof import("../internals").BaseDateValidationProps | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;

package/DateField/useDateField.js

@@ -1,22 +1,24 @@
 'use client';
 
-import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
-import { useField } from "../internals/hooks/useField/index.js";
-import { validateDate } from "../validation/index.js";
+import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
 import { useSplitFieldProps } from "../hooks/index.js";
-import { useDefaultizedDateField } from "../internals/hooks/defaultizedFieldProps.js";
-export const useDateField = inProps => {
-  const props = useDefaultizedDateField(inProps);
+import { useDateManager } from "../managers/index.js";
+export const useDateField = props => {
+  const manager = useDateManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'date');
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: singleItemValueManager,
-    fieldValueManager: singleItemFieldValueManager,
-    validator: validateDate,
-    valueType: 'date'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };

package/DatePicker/DatePicker.js

@@ -59,7 +59,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
+   * If `true`, the Picker will close after submitting the full date.
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,

package/DatePicker/DatePicker.types.d.ts

@@ -29,6 +29,11 @@ export interface DatePickerProps<TEnableAccessibleFieldDOMStructure extends bool
      * @default 4 on desktop, 3 on mobile
      */
     yearsPerRow?: 3 | 4;
+    /**
+     * If `true`, the Picker will close after submitting the full date.
+     * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+     */
+    closeOnSelect?: boolean;
 }
 /**
  * Props the field can receive when used inside a date picker (<DatePicker />, <DesktopDatePicker /> or <MobileDatePicker /> component).

package/DatePicker/DatePickerToolbar.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
-import { DateView } from '../models';
 import { DatePickerToolbarClasses } from './datePickerToolbarClasses';
-import { PickerValue } from '../internals/models';
-export interface DatePickerToolbarProps extends BaseToolbarProps<PickerValue, DateView>, ExportedDatePickerToolbarProps {
+export interface DatePickerToolbarProps extends BaseToolbarProps, ExportedDatePickerToolbarProps {
 }
 export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {
     /**

package/DatePicker/DatePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className", "classes", "onViewChange", "view"];
+const _excluded = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -15,6 +15,7 @@ import { useUtils } from "../internals/hooks/useUtils.js";
 import { getDatePickerToolbarUtilityClass } from "./datePickerToolbarClasses.js";
 import { resolveDateFormat } from "../internals/utils/date-utils.js";
 import { useToolbarOwnerState } from "../internals/hooks/useToolbarOwnerState.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -58,21 +59,23 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     name: 'MuiDatePickerToolbar'
   });
   const {
-      value,
-      isLandscape,
       toolbarFormat,
       toolbarPlaceholder = '––',
-      views,
       className,
       classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
+  const {
+    value,
+    views,
+    orientation
+  } = usePickerContext();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
   const classes = useUtilityClasses(classesProp);
   const dateText = React.useMemo(() => {
-    if (!value) {
+    if (!utils.isValid(value)) {
       return toolbarPlaceholder;
     }
     const formatFromViews = resolveDateFormat(utils, {
@@ -84,12 +87,11 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
   return /*#__PURE__*/_jsx(DatePickerToolbarRoot, _extends({
     ref: ref,
     toolbarTitle: translations.datePickerToolbarTitle,
-    isLandscape: isLandscape,
     className: clsx(classes.root, className)
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
       variant: "h4",
-      align: isLandscape ? 'left' : 'center',
+      align: orientation === 'landscape' ? 'left' : 'center',
       ownerState: ownerState,
       className: classes.title,
       children: dateText
@@ -111,14 +113,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: PropTypes.bool,
-  isLandscape: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -132,14 +126,5 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * Toolbar value placeholder—it is displayed when the value is empty.
    * @default "––"
    */
-  toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.object,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
+  toolbarPlaceholder: PropTypes.node
 } : void 0;

package/DatePicker/shared.d.ts

@@ -19,7 +19,7 @@ export interface BaseDatePickerSlots extends DateCalendarSlots {
 export interface BaseDatePickerSlotProps extends DateCalendarSlotProps {
     toolbar?: ExportedDatePickerToolbarProps;
 }
-export type DatePickerViewRenderers<TView extends DateView, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerValue, TView, DateViewRendererProps<TView>, TAdditionalProps>;
+export type DatePickerViewRenderers<TView extends DateView> = PickerViewRendererLookup<PickerValue, TView, DateViewRendererProps<TView>>;
 export interface BaseDatePickerProps extends BasePickerInputProps<PickerValue, DateView, DateValidationError>, ExportedDateCalendarProps {
     /**
      * Overridable component slots.

package/DateTimeField/useDateTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateTimeFieldProps } from './DateTimeField.types';
-export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps> & Required<Pick<UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "ampm" | "disableFuture" | "disablePast" | "maxDate" | "minDate" | "timezone" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | "minutesStep" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minTime" | "maxTime" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime" | "dateSeparator">>;
+export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "onChange" | "onError" | "format" | "ampm" | "disableFuture" | "disablePast" | "maxDate" | "minDate" | "timezone" | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;

package/DateTimeField/useDateTimeField.js

@@ -1,22 +1,24 @@
 'use client';
 
-import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
-import { useField } from "../internals/hooks/useField/index.js";
-import { validateDateTime } from "../validation/index.js";
+import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
 import { useSplitFieldProps } from "../hooks/index.js";
-import { useDefaultizedDateTimeField } from "../internals/hooks/defaultizedFieldProps.js";
-export const useDateTimeField = inProps => {
-  const props = useDefaultizedDateTimeField(inProps);
+import { useDateTimeManager } from "../managers/index.js";
+export const useDateTimeField = props => {
+  const manager = useDateTimeManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'date-time');
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: singleItemValueManager,
-    fieldValueManager: singleItemFieldValueManager,
-    validator: validateDateTime,
-    valueType: 'date-time'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };

package/DateTimePicker/DateTimePicker.js

@@ -69,8 +69,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/DateTimePicker/DateTimePicker.types.d.ts

@@ -4,9 +4,9 @@ import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePic
 import { DateTimeValidationError } from '../models';
 import { ValidateDateTimeProps } from '../validation';
 import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
-export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, MobileDateTimePickerSlots<DateOrTimeViewWithMeridiem> {
+export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, MobileDateTimePickerSlots {
 }
-export interface DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateTimePickerSlotProps<DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
+export interface DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure> {
 }
 export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, ExportedYearCalendarProps, Omit<MobileDateTimePickerProps<DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
     /**

package/DateTimePicker/DateTimePickerTabs.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { DateTimePickerTabsClasses } from './dateTimePickerTabsClasses';
-import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
-export interface ExportedDateTimePickerTabsProps extends ExportedBaseTabsProps {
+import { ExportedBaseTabsProps } from '../internals/models/props/tabs';
+export interface DateTimePickerTabsProps extends ExportedBaseTabsProps {
     /**
      * Toggles visibility of the tabs allowing view switching.
      * @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
@@ -23,8 +22,6 @@ export interface ExportedDateTimePickerTabsProps extends ExportedBaseTabsProps {
      */
     classes?: Partial<DateTimePickerTabsClasses>;
 }
-export interface DateTimePickerTabsProps extends ExportedDateTimePickerTabsProps, BaseTabsProps<DateOrTimeViewWithMeridiem> {
-}
 /**
  * Demos:
  *

package/DateTimePicker/DateTimePickerTabs.js

@@ -12,6 +12,7 @@ import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { getDateTimePickerTabsUtilityClass } from "./dateTimePickerTabsClasses.js";
 import { isDatePickerView } from "../internals/utils/date-utils.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const viewToTab = view => {
   if (isDatePickerView(view)) {
@@ -65,9 +66,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
   });
   const {
     dateIcon = /*#__PURE__*/_jsx(DateRangeIcon, {}),
-    onViewChange,
     timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
-    view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     className,
     classes: classesProp,
@@ -77,9 +76,13 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
   const {
     ownerState
   } = usePickerPrivateContext();
+  const {
+    view,
+    setView
+  } = usePickerContext();
   const classes = useUtilityClasses(classesProp);
   const handleChange = (event, value) => {
-    onViewChange(tabToView(value));
+    setView(tabToView(value));
   };
   if (hidden) {
     return null;
@@ -126,12 +129,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
    */
   hidden: PropTypes.bool,
-  /**
-   * Callback called when a tab is clicked.
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -140,10 +137,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * Time tab icon.
    * @default Time
    */
-  timeIcon: PropTypes.node,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired
+  timeIcon: PropTypes.node
 } : void 0;
 export { DateTimePickerTabs };

package/DateTimePicker/DateTimePickerToolbar.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
-import { MakeOptional } from '@mui/x-internals/types';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { DateTimePickerToolbarClasses } from './dateTimePickerToolbarClasses';
 import { DateOrTimeViewWithMeridiem, PickerValue } from '../internals/models';
+import { DateTimeValidationError } from '../models';
+import { SetValueActionOptions } from '../internals/hooks/usePicker/usePickerValue.types';
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<DateTimePickerToolbarClasses>;
 }
-export interface DateTimePickerToolbarProps extends ExportedDateTimePickerToolbarProps, MakeOptional<BaseToolbarProps<PickerValue, DateOrTimeViewWithMeridiem>, 'view'> {
+export interface DateTimePickerToolbarProps extends ExportedDateTimePickerToolbarProps, BaseToolbarProps {
     /**
      * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
      */
@@ -18,10 +19,17 @@ export interface DateTimePickerToolbarProps extends ExportedDateTimePickerToolba
     ampmInClock?: boolean;
 }
 /**
- * If this context value is set to true, the toolbar will always be rendered in the desktop mode.
+ * If `forceDesktopVariant` is set to `true`, the toolbar will always be rendered in the desktop mode.
+ * If `onViewChange` is defined, the toolbar will call it instead of calling the default handler from `usePickerContext`.
  * This is used by the Date Time Range Picker Toolbar.
  */
-export declare const DateTimePickerToolbarForceDesktopVariant: React.Context<boolean>;
+export declare const DateTimePickerToolbarOverrideContext: React.Context<{
+    value: PickerValue;
+    setValue: (value: PickerValue, options?: SetValueActionOptions<DateTimeValidationError>) => void;
+    forceDesktopVariant: boolean;
+    setView: (view: DateOrTimeViewWithMeridiem) => void;
+    view: DateOrTimeViewWithMeridiem | null;
+} | null>;
 /**
  * Demos:
  *