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

package/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.d.ts

@@ -1 +1 @@
-export { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+export { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';

package/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.js

@@ -1 +1 @@
-export { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+export { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';

package/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
   "module": "./index.js",
-  "main": "../node/AdapterDateFnsJalaliV3/index.js",
+  "main": "../node/AdapterDateFnsJalaliV2/index.js",
   "types": "./index.d.ts"
 }

package/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.d.ts

@@ -1 +1 @@
-export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';

package/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.js

@@ -1 +1 @@
-export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';

package/{AdapterDateFnsV3 → AdapterDateFnsV2}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
   "module": "./index.js",
-  "main": "../node/AdapterDateFnsV3/index.js",
+  "main": "../node/AdapterDateFnsV2/index.js",
   "types": "./index.d.ts"
 }

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/DateRangeCalendar/DateRangeCalendar.js

@@ -27,6 +27,7 @@ import { useDragRange } from "./useDragRange.js";
 import { useRangePosition } from "../internals/hooks/useRangePosition.js";
 import { DAY_RANGE_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
 import { PickersRangeCalendarHeader } from "../PickersRangeCalendarHeader/index.js";
+import { useNullablePickerRangePositionContext } from "../internals/hooks/useNullablePickerRangePositionContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 const DateRangeCalendarRoot = styled('div', {
@@ -135,8 +136,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       reduceAnimations,
       onMonthChange,
       rangePosition: rangePositionProp,
-      defaultRangePosition: inDefaultRangePosition,
-      onRangePositionChange: inOnRangePositionChange,
+      defaultRangePosition: defaultRangePositionProp,
+      onRangePositionChange: onRangePositionChangeProp,
       calendars,
       currentMonthCalendarPosition = 1,
       slots,
@@ -161,6 +162,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       onViewChange
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rangePositionContext = useNullablePickerRangePositionContext();
   const {
     value,
     handleValueChange,
@@ -192,9 +194,9 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     rangePosition,
     onRangePositionChange
   } = useRangePosition({
-    rangePosition: rangePositionProp,
-    defaultRangePosition: inDefaultRangePosition,
-    onRangePositionChange: inOnRangePositionChange
+    rangePosition: rangePositionProp ?? rangePositionContext?.rangePosition,
+    defaultRangePosition: defaultRangePositionProp,
+    onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.onRangePositionChange
   });
   const handleDatePositionChange = useEventCallback(position => {
     if (rangePosition !== position) {
@@ -228,7 +230,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
 
   // Range going for the start of the start day to the end of the end day.
   // This makes sure that `isWithinRange` works with any time in the start and end day.
-  const valueDayRange = React.useMemo(() => [value[0] == null || !utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), value[1] == null || !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
+  const valueDayRange = React.useMemo(() => [!utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
   const _useDragRange = useDragRange({
       disableDragEditing: shouldDisableDragEditing,
       onDrop: handleDrop,
@@ -316,7 +318,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
-    if (!date || !utils.isValid(date)) {
+    if (!utils.isValid(date)) {
       return;
     }
     const prevDate = rangePosition === 'start' ? prevValue.current?.[0] : prevValue.current?.[1];

package/DateRangePicker/DateRangePicker.js

@@ -63,7 +63,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   calendars: PropTypes.oneOf([1, 2, 3]),
   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/DateRangePicker/DateRangePicker.types.d.ts

@@ -24,6 +24,11 @@ export interface DateRangePickerProps<TEnableAccessibleFieldDOMStructure extends
      * @default {}
      */
     slotProps?: DateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+    /**
+     * 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 range picker (<DateRangePicker />, <DesktopDateRangePicker /> or <MobileDateRangePicker /> component).

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { BaseToolbarProps, ExportedBaseToolbarProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
+import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
 import { DateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
-export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, Omit<BaseToolbarProps<PickerRangeValue, 'day'>, 'onChange' | 'isLandscape'>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, Omit<BaseToolbarProps, 'onChange' | 'isLandscape'> {
 }
 export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps {
     /**

package/DateRangePicker/DateRangePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "classes", "onViewChange", "view", "views"];
+const _excluded = ["toolbarFormat", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -10,8 +10,9 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { PickersToolbar, PickersToolbarButton, useUtils, useToolbarOwnerState } from '@mui/x-date-pickers/internals';
-import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { getDateRangePickerToolbarUtilityClass } from "./dateRangePickerToolbarClasses.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -49,38 +50,48 @@ const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangeP
     name: 'MuiDateRangePickerToolbar'
   });
   const {
-      value: [start, end],
-      rangePosition,
-      onRangePositionChange,
-      toolbarFormat,
+      toolbarFormat: toolbarFormatProp,
       className,
       classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    value
+  } = usePickerContext();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
+  const {
+    rangePosition,
+    onRangePositionChange
+  } = usePickerRangePositionContext();
   const classes = useUtilityClasses(classesProp);
-  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : translations.start;
-  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : translations.end;
+
+  // This can't be a default value when spreading because it breaks the API generation.
+  const toolbarFormat = toolbarFormatProp ?? utils.formats.shortDate;
+  const formatDate = (date, fallback) => {
+    if (!utils.isValid(date)) {
+      return fallback;
+    }
+    return utils.formatByString(date, toolbarFormat);
+  };
   return /*#__PURE__*/_jsx(DateRangePickerToolbarRoot, _extends({}, other, {
     toolbarTitle: translations.dateRangePickerToolbarTitle,
-    isLandscape: false,
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     children: /*#__PURE__*/_jsxs(DateRangePickerToolbarContainer, {
       className: classes.container,
       children: [/*#__PURE__*/_jsx(PickersToolbarButton, {
-        variant: start !== null ? 'h5' : 'h6',
-        value: startDateValue,
+        variant: value[0] == null ? 'h6' : 'h5',
+        value: formatDate(value[0], translations.start),
         selected: rangePosition === 'start',
         onClick: () => onRangePositionChange('start')
       }), /*#__PURE__*/_jsxs(Typography, {
         variant: "h5",
         children: ["\xA0", '–', "\xA0"]
       }), /*#__PURE__*/_jsx(PickersToolbarButton, {
-        variant: end !== null ? 'h5' : 'h6',
-        value: endDateValue,
+        variant: value[1] == null ? 'h6' : 'h5',
+        value: formatDate(value[1], translations.end),
         selected: rangePosition === 'end',
         onClick: () => onRangePositionChange('end')
       })]
@@ -102,14 +113,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: PropTypes.bool,
-  onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
-  rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -123,15 +126,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * Toolbar value placeholder—it is displayed when the value is empty.
    * @default "––"
    */
-  toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day'])).isRequired
+  toolbarPlaceholder: PropTypes.node
 } : void 0;
 export { DateRangePickerToolbar };

package/DateRangePicker/shared.d.ts

@@ -33,7 +33,7 @@ export interface BaseDateRangePickerProps extends Omit<BasePickerInputProps<Pick
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be used.
      */
-    viewRenderers?: Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>, {}>>;
+    viewRenderers?: Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>>;
 }
 type UseDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps> = LocalizedComponent<DefaultizedProps<Props, ValidateDateRangePropsToDefault>>;
 export declare function useDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps>(props: Props, name: string): UseDateRangePickerDefaultizedProps<Props>;

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -68,8 +68,8 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   calendars: PropTypes.oneOf([1, 2, 3]),
   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/DateTimeRangePicker/DateTimeRangePickerTabs.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { DateOrTimeViewWithMeridiem, BaseTabsProps, ExportedBaseTabsProps } from '@mui/x-date-pickers/internals';
+import { ExportedBaseTabsProps } from '@mui/x-date-pickers/internals';
 import { DateTimeRangePickerTabsClasses } from './dateTimeRangePickerTabsClasses';
-import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
 export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsProps {
     /**
      * Toggles visibility of the tabs allowing view switching.
@@ -12,18 +11,18 @@ export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsPr
      * Date tab icon.
      * @default DateRangeIcon
      */
-    dateIcon?: React.ReactElement;
+    dateIcon?: React.ReactElement<any>;
     /**
      * Time tab icon.
      * @default TimeIcon
      */
-    timeIcon?: React.ReactElement;
+    timeIcon?: React.ReactElement<any>;
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<DateTimeRangePickerTabsClasses>;
 }
-export interface DateTimeRangePickerTabsProps extends ExportedDateTimeRangePickerTabsProps, BaseTabsProps<DateOrTimeViewWithMeridiem>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+export interface DateTimeRangePickerTabsProps extends ExportedDateTimeRangePickerTabsProps {
 }
 declare const DateTimeRangePickerTabs: {
     (inProps: DateTimeRangePickerTabsProps): React.JSX.Element | null;

package/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -8,10 +8,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
 import { isDatePickerView, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
-import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import { getDateTimeRangePickerTabsUtilityClass } from "./dateTimeRangePickerTabsClasses.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const viewToTab = (view, rangePosition) => {
   if (isDatePickerView(view)) {
@@ -69,12 +70,8 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
   });
   const {
     dateIcon = /*#__PURE__*/_jsx(DateRangeIcon, {}),
-    onViewChange,
     timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
-    view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
-    rangePosition,
-    onRangePositionChange,
     className,
     classes: classesProp,
     sx
@@ -83,8 +80,16 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
   const {
     ownerState
   } = usePickerPrivateContext();
+  const {
+    view,
+    setView
+  } = usePickerContext();
   const classes = useUtilityClasses(classesProp);
-  const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
+  const {
+    rangePosition,
+    onRangePositionChange
+  } = usePickerRangePositionContext();
+  const value = React.useMemo(() => view == null ? null : viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
   const isNextHidden = value === 'end-time';
   const tabLabel = React.useMemo(() => {
@@ -109,18 +114,26 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     }
   });
   const changeToPreviousTab = useEventCallback(() => {
-    const previousTab = tabOptions[tabOptions.indexOf(value) - 1];
-    onViewChange(tabToView(previousTab));
+    const previousTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) - 1];
+    setView(tabToView(previousTab));
     handleRangePositionChange(previousTab);
   });
   const changeToNextTab = useEventCallback(() => {
-    const nextTab = tabOptions[tabOptions.indexOf(value) + 1];
-    onViewChange(tabToView(nextTab));
+    const nextTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) + 1];
+    setView(tabToView(nextTab));
     handleRangePositionChange(nextTab);
   });
   if (hidden) {
     return null;
   }
+  let startIcon;
+  if (view == null) {
+    startIcon = null;
+  } else if (isDatePickerView(view)) {
+    startIcon = dateIcon;
+  } else {
+    startIcon = timeIcon;
+  }
   return /*#__PURE__*/_jsxs(DateTimeRangePickerTabsRoot, {
     ownerState: ownerState,
     className: clsx(classes.root, className),
@@ -133,7 +146,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
       className: classes.filler
     }), /*#__PURE__*/_jsx(DateTimeRangePickerTab, {
-      startIcon: isDatePickerView(view) ? dateIcon : timeIcon,
+      startIcon: startIcon,
       className: classes.tabButton,
       size: "large",
       children: tabLabel
@@ -167,14 +180,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    * @default `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`
    */
   hidden: PropTypes.bool,
-  onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a tab is clicked.
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
-  rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -183,10 +188,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    * Time tab icon.
    * @default TimeIcon
    */
-  timeIcon: PropTypes.element,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired
+  timeIcon: PropTypes.element
 } : void 0;
 export { DateTimeRangePickerTabs };