@mui/x-date-pickers-pro 7.0.0-beta.7 → 7.0.0

package/CHANGELOG.md

@@ -3,6 +3,189 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v7.0.0
+
+_Mar 22, 2024_
+
+We're excited to [announce the first v7 stable release](https://mui.com/blog/mui-x-v7/)! 🎉🚀
+
+This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements.
+Migration guides are available with a complete list of the breaking changes:
+
+- [Data Grid](https://mui.com/x/migration/migration-data-grid-v6/)
+- [Date and Time Pickers](https://mui.com/x/migration/migration-pickers-v6/)
+- [Tree View](https://mui.com/x/migration/migration-tree-view-v6/)
+- [Charts](https://mui.com/x/migration/migration-charts-v6/)
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Improve the usage of custom `viewRenderers` on `DateTimePicker` (#12441) @LukasTy
+- ✨ Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
+- 🕹️ Support controlled `density` for the Data Grid (#12332) @MBilalShafi
+- 🎁 Dynamic virtualization range for the Data Grid (#12353) @romgrk
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `density` is a [controlled prop](https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically) now, if you were previously passing the `density` prop to the Data Grid, you will need to do one of the following:
+
+  1. Move it to the `initialState.density` to initialize it.
+
+  ```diff
+   <DataGrid
+  -  density="compact"
+  +  initialState={{ density: "compact" }}
+   />
+  ```
+
+  2. Move it to the state and use `onDensityChange` callback to update the `density` prop accordingly for it to work as expected.
+
+  ```diff
+  + const [density, setDensity] = React.useState<GridDensity>('compact');
+   <DataGrid
+  -  density="compact"
+  +  density={density}
+  +  onDensityChange={(newDensity) => setDensity(newDensity)}
+   />
+  ```
+
+- The selector `gridDensityValueSelector` was removed, use the `gridDensitySelector` instead.
+
+- The props `rowBuffer` and `columnBuffer` were renamed to `rowBufferPx` and `columnBufferPx`.
+  Their value is now a pixel value rather than a number of items. Their default value is now `150`.
+
+- The props `rowThreshold` and `columnThreshold` have been removed.
+  If you had the `rowThreshold` prop set to `0` to force new rows to be rendered more often – this is no longer necessary.
+
+#### `@mui/x-data-grid@7.0.0`
+
+- [DataGrid] Allow to control the grid density (#12332) @MBilalShafi
+- [DataGrid] Dynamic virtualization range (#12353) @romgrk
+- [DataGrid] Fix `ElementType` usage (#12479) @cherniavskii
+- [DataGrid] Fix cell value formatting on copy (#12357) @sai6855
+- [DataGrid] Fix checkbox selection is keeping selection when filtering (#11751) @g1mishra
+- [DataGrid] Make `rows` an optional prop (#12478) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.0.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@7.0.0`.
+
+#### `@mui/x-data-grid-premium@7.0.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@7.0.0`, plus:
+
+- [DataGridPremium] Add support for confirmation before clipboard paste (#12225) @cherniavskii
+- [DataGridPremium] Fix single grouping column sorting (#9679) @cherniavskii
+- [DataGridPremium] Fix boolean cell not rendered in group rows (#12492) @sai6855
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `DesktopDateTimePicker` view rendering has been optimized by using the same technique as for `DesktopDateTimeRangePicker`.
+  - The `dateTimeViewRenderers` have been removed in favor of reusing existing time view renderers (`renderTimeViewClock`, `renderDigitalClockTimeView` and `renderMultiSectionDigitalClockTimeView`) and date view renderer (`renderDateViewCalendar`).
+  - Passing `renderTimeViewClock` to time view renderers will no longer revert to the old behavior of rendering only date or time view.
+
+#### `@mui/x-date-pickers@7.0.0`
+
+- [fields] Allow to override the separator between the start and the end date in all range fields (#12174) @flaviendelangle
+- [fields] Support format without separator (#12489) @flaviendelangle
+- [pickers] Use renderer interceptor on `DesktopDateTimePicker` (#12441) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.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@7.0.0`, plus:
+
+- [DateTimeRangePicker] Add component `JSDoc` (#12518) @LukasTy
+- [DateTimeRangePicker] Fix views behavior regression (#12529) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.0.0`
+
+- [charts] Fix small typo in `CartesianContextProvider` (#12461) @Janpot
+
+### Tree View
+
+#### Breaking changes
+
+- The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
+
+```diff
+ <TreeView>
+-    <TreeItem label="Item 1" nodeId="one">
++    <TreeItem label="Item 1" itemId="one">
+ </TreeView>
+```
+
+- The focus is now applied to the Tree Item root element instead of the Tree View root element.
+
+  This change will allow new features that require the focus to be on the Tree Item,
+  like the drag and drop reordering of items.
+  It also solves several issues with focus management,
+  like the inability to scroll to the focused item when a lot of items are rendered.
+
+  This will mostly impact how you write tests to interact with the Tree View:
+
+  For example, if you were writing a test with `react-testing-library`, here is what the changes could look like:
+
+  ```diff
+   it('test example on first item', () => {
+  -  const { getByRole } = render(
+  +  const { getAllByRole } = render(
+       <SimpleTreeView>
+         <TreeItem nodeId="one" />
+         <TreeItem nodeId="two" />
+      </SimpleTreeView>
+     );
+
+  -  const tree = getByRole('tree');
+  +  const firstTreeItem = getAllByRole('treeitem')[0];
+     act(() => {
+  -    tree.focus();
+  +    firstTreeItem.focus();
+     });
+  -  fireEvent.keyDown(tree, { key: 'ArrowDown' });
+  +  fireEvent.keyDown(firstTreeItem, { key: 'ArrowDown' });
+   })
+  ```
+
+#### `@mui/x-tree-view@7.0.0`
+
+- [TreeView] Rename `nodeId` to `itemId` (#12418) @noraleonte
+- [TreeView] Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
+- [TreeView] Update JSDoc of the `ContentComponent` prop to avoid using the word "node" (#12476) @flaviendelangle
+
+### `@mui/x-codemod@7.0.0`
+
+- [codemod] Add a codemod and update the grid migration guide (#12488) @MBilalShafi
+
+### Docs
+
+- [docs] Finalize migration guide (#12501) @noraleonte
+- [docs] Fix nested cells alignment in the popular features demo (#12450) @cherniavskii
+- [docs] Fix some Vale errors (#12469) @oliviertassinari
+- [docs] Remove mentions of pre release (#12513) @noraleonte
+- [docs] Update branch name and tags (#12498) @cherniavskii
+- [docs] Update links to v6 (#12496) @cherniavskii
+- [docs] Update links to v7 docs (#12500) @noraleonte
+- [docs] Update supported versions (#12508) @joserodolfofreitas
+- [docs] Update "What's new in MUI X" page #12527 @cherniavskii
+
+### Core
+
+- [core] Bump `@mui/material` peer dependency for all packages (#12516) @LukasTy
+- [core] Fix `no-restricted-imports` ESLint rule not working for Data Grid packages (#12477) @cherniavskii
+- [core] Lower the frequency of `no-response` action runs (#12491) @michaldudak
+- [core] Remove leftover `legacy` `browserlistrc` entry (#12415) @LukasTy
+- [core] Update NPM tag (#12511) @cherniavskii
+- [core] Update supported browsers (browserlistrc) (#12521) @LukasTy
+- [core] Use Circle CI context @oliviertassinari
+- [license] Fix grammar on expired license error message (#12460) @joserodolfofreitas
+
 ## 7.0.0-beta.7
 
 _Mar 14, 2024_
@@ -90,7 +273,7 @@ The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
 - [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy
 - [docs] Add missing luxon `Info` import (#12427) @LukasTy
 - [docs] Improve slots definitions for charts (#12408) @alexfauquette
-- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
+- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
 - [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari
 - [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy
 
@@ -252,7 +435,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
 ### Docs
 
 - [docs] Fix image layout shift when loading @oliviertassinari
-- [docs] Match Material UI repo comment for redirections @oliviertassinari
+- [docs] Match Material UI repo comment for redirections @oliviertassinari
 - [docs] Non breaking spaces @oliviertassinari
 - [docs] Polish the Date Picker playground (#11869) @zanivan
 - [docs] Standardize WAI-ARIA references @oliviertassinari
@@ -263,9 +446,9 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
 - [core] Remove grid folder from `getComponentInfo` RegExp (#12241) @flaviendelangle
 - [core] Remove `window.` reference for common globals @oliviertassinari
 - [core] Use runtime agnostic setTimeout type @oliviertassinari
-- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
+- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
 - [docs-infra] Fix missing non breaking spaces @oliviertassinari
-- [github] Update `no-response` workflow (#12193) @MBilalShafi
+- [infra] Update `no-response` workflow (#12193) @MBilalShafi
 - [infra] Fix missing permission reset @oliviertassinari
 
 ## 7.0.0-beta.4
@@ -282,7 +465,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 ### Breaking changes
 
-- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
+- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
 
 ### Data Grid
 
@@ -324,7 +507,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
 - The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
   This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure).
 
- When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
+  When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
 
   ```diff
     function MyCustomTextField(props) {
@@ -392,7 +575,7 @@ These components are no longer exported from `@mui/x-charts`:
 ### Docs
 
 - [docs] Add recipe for hiding separator on non-resizable columns (#12134) @michelengelen
-- [docs] Add small improvements to the Gauge Chart page (#12076) @danilo-leal
+- [docs] Add small improvements to the Gauge page (#12076) @danilo-leal
 - [docs] Add the 'point' scaleType to the axis documentation (#12179) @alexfauquette
 - [docs] Clarify Pickers 'Component composition' section (#12097) @LukasTy
 - [docs] Fix "Licensing" page link (#12156) @LukasTy
@@ -975,7 +1158,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
 
 - [charts] Do not propagate `innerRadius` and `outerRadius` to the DOM (#11689) @alexfauquette
 - [charts] Fix default `stackOffset` for `LineChart` (#11647) @alexfauquette
-- [charts] Remove a TS ignore (#11688) @alexfauquette
+- [charts] Remove a TypeScript ignore (#11688) @alexfauquette
 
 ### Tree View
 
@@ -1404,7 +1587,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.7`.
 - [core] Fix release changelog (#11496) @romgrk
 - [core] Fix use of ::before & ::after (#11515) @oliviertassinari
 - [core] Localize the issue template to MUI X (#11511) @oliviertassinari
-- [core] Regen api files (#11542) @flaviendelangle
+- [core] Regenerate API files (#11542) @flaviendelangle
 - [core] Remove issue emoji @oliviertassinari
 - [core] Sync the release instructions with MUI Core @oliviertassinari
 - [core] Yaml format match most common convention @oliviertassinari
@@ -1447,7 +1630,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 
 - The `filterModel` now supports `Date` objects as values for `date` and `dateTime` column types.
   The `filterModel` still accepts strings as values for `date` and `dateTime` column types,
-  but all updates to the `filterModel` coming from the UI (e.g. filter panel) will set the value as a `Date` object.
+  but all updates to the `filterModel` coming from the UI (for example filter panel) will set the value as a `Date` object.
 
 #### `@mui/x-data-grid@7.0.0-alpha.6`
 
@@ -1658,7 +1841,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.5`, plus:
 ### Core
 
 - [core] Automate cherry-pick of PRs from `next` -> `master` (#11382) @MBilalShafi
-- [github] Update `no-response` workflow (#11369) @MBilalShafi
+- [infra] Update `no-response` workflow (#11369) @MBilalShafi
 - [test] Fix flaky screenshots (#11388) @cherniavskii
 
 ## 7.0.0-alpha.4
@@ -1896,7 +2079,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.3`.
 
 - [charts] Adjusted `defaultizeValueFormatter` util to accept an optional `series.valueFormatter` value (#11144) @michelengelen
 - [charts] Apply `labelStyle` and `tickLabelStyle` props on `<ChartsYAxis />` (#11180) @akamfoad
-- [charts] Fix TS config (#11259) @alexfauquette
+- [charts] Fix TypeScript config (#11259) @alexfauquette
 - [charts] Fix error with empty dataset (#11063) @alexfauquette
 - [charts] Fix export strategy (#11235) @alexfauquette
 - [charts] Remove outdated prop-types (#11045) @alexfauquette

package/DateRangeCalendar/DateRangeCalendar.js

@@ -69,7 +69,6 @@ const DayCalendarForRange = styled(DayCalendar)(({
   }
 }));
 function useDateRangeCalendarDefaultizedProps(props, name) {
-  var _themeProps$renderLoa, _themeProps$reduceAni, _props$loading, _props$disablePast, _props$disableFuture, _themeProps$openTo, _themeProps$views, _themeProps$calendars, _themeProps$disableDr, _themeProps$available;
   const utils = useUtils();
   const defaultDates = useDefaultDates();
   const defaultReduceAnimations = useDefaultReduceAnimations();
@@ -78,20 +77,20 @@ function useDateRangeCalendarDefaultizedProps(props, name) {
     name
   });
   return _extends({}, themeProps, {
-    renderLoading: (_themeProps$renderLoa = themeProps.renderLoading) != null ? _themeProps$renderLoa : () => /*#__PURE__*/_jsx("span", {
+    renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/_jsx("span", {
       children: "..."
-    }),
-    reduceAnimations: (_themeProps$reduceAni = themeProps.reduceAnimations) != null ? _themeProps$reduceAni : defaultReduceAnimations,
-    loading: (_props$loading = props.loading) != null ? _props$loading : false,
-    disablePast: (_props$disablePast = props.disablePast) != null ? _props$disablePast : false,
-    disableFuture: (_props$disableFuture = props.disableFuture) != null ? _props$disableFuture : false,
-    openTo: (_themeProps$openTo = themeProps.openTo) != null ? _themeProps$openTo : 'day',
-    views: (_themeProps$views = themeProps.views) != null ? _themeProps$views : ['day'],
+    })),
+    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    loading: props.loading ?? false,
+    disablePast: props.disablePast ?? false,
+    disableFuture: props.disableFuture ?? false,
+    openTo: themeProps.openTo ?? 'day',
+    views: themeProps.views ?? ['day'],
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
-    calendars: (_themeProps$calendars = themeProps.calendars) != null ? _themeProps$calendars : 2,
-    disableDragEditing: (_themeProps$disableDr = themeProps.disableDragEditing) != null ? _themeProps$disableDr : false,
-    availableRangePositions: (_themeProps$available = themeProps.availableRangePositions) != null ? _themeProps$available : ['start', 'end']
+    calendars: themeProps.calendars ?? 2,
+    disableDragEditing: themeProps.disableDragEditing ?? false,
+    availableRangePositions: themeProps.availableRangePositions ?? ['start', 'end']
   });
 }
 const useUtilityClasses = ownerState => {
@@ -117,7 +116,6 @@ const useUtilityClasses = ownerState => {
  * - [DateRangeCalendar API](https://mui.com/x/api/date-pickers/date-range-calendar/)
  */
 const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
-  var _slots$calendarHeader;
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   const shouldHavePreview = useMediaQuery(DEFAULT_DESKTOP_MODE_MEDIA_QUERY, {
     defaultMatches: false
@@ -283,10 +281,10 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     shouldDisableDate: wrappedShouldDisableDate,
     timezone
   });
-  const CalendarHeader = (_slots$calendarHeader = slots == null ? void 0 : slots.calendarHeader) != null ? _slots$calendarHeader : PickersRangeCalendarHeader;
+  const CalendarHeader = slots?.calendarHeader ?? PickersRangeCalendarHeader;
   const calendarHeaderProps = useSlotProps({
     elementType: CalendarHeader,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.calendarHeader,
+    externalSlotProps: slotProps?.calendarHeader,
     additionalProps: {
       calendars,
       views: ['day'],
@@ -310,12 +308,11 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   });
   const prevValue = React.useRef(null);
   React.useEffect(() => {
-    var _prevValue$current, _prevValue$current2;
     const date = rangePosition === 'start' ? value[0] : value[1];
     if (!date || !utils.isValid(date)) {
       return;
     }
-    const prevDate = rangePosition === 'start' ? (_prevValue$current = prevValue.current) == null ? void 0 : _prevValue$current[0] : (_prevValue$current2 = prevValue.current) == null ? void 0 : _prevValue$current2[1];
+    const prevDate = rangePosition === 'start' ? prevValue.current?.[0] : prevValue.current?.[1];
     prevValue.current = value;
 
     // The current date did not change, this call comes either from a `rangePosition` change or a change in the other date.
@@ -367,7 +364,6 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   }, slots);
   const slotPropsForDayCalendar = _extends({}, slotProps, {
     day: dayOwnerState => {
-      var _resolveComponentProp;
       const {
         day
       } = dayOwnerState;
@@ -396,7 +392,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         'data-position': datePosition
       }, dragEventHandlers, {
         draggable: isElementDraggable ? true : undefined
-      }, (_resolveComponentProp = resolveComponentProps(slotProps == null ? void 0 : slotProps.day, dayOwnerState)) != null ? _resolveComponentProp : {});
+      }, resolveComponentProps(slotProps?.day, dayOwnerState) ?? {});
     }
   });
   const calendarMonths = React.useMemo(() => Array.from({
@@ -414,7 +410,6 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     }).map((_, index) => utils.addMonths(firstMonth, index));
   }, [utils, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
   const focusedMonth = React.useMemo(() => {
-    var _visibleMonths$find;
     if (!autoFocus) {
       return null;
     }
@@ -431,7 +426,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     if (value[1] != null) {
       return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
     }
-    return (_visibleMonths$find = visibleMonths.find(month => utils.isSameMonth(month, now))) != null ? _visibleMonths$find : visibleMonths[0];
+    return visibleMonths.find(month => utils.isSameMonth(month, now)) ?? visibleMonths[0];
   }, [utils, value, visibleMonths, autoFocus, now]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
@@ -652,7 +647,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/DateRangeCalendar/useDragRange.js

@@ -27,9 +27,8 @@ const resolveButtonElement = element => {
   return element;
 };
 const resolveElementFromTouch = (event, ignoreTouchTarget) => {
-  var _event$changedTouches;
   // don't parse multi-touch result
-  if (((_event$changedTouches = event.changedTouches) == null ? void 0 : _event$changedTouches.length) === 1 && event.touches.length <= 1) {
+  if (event.changedTouches?.length === 1 && event.touches.length <= 1) {
     const element = document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
     // `elementFromPoint` could have resolved preview div or wrapping div
     // might need to recursively find the nested button

package/DateRangePicker/DateRangePicker.js

@@ -277,7 +277,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/DateRangePicker/shared.js

@@ -4,7 +4,6 @@ import { useThemeProps } from '@mui/material/styles';
 import { useDefaultDates, useUtils, applyDefaultDate } from '@mui/x-date-pickers/internals';
 import { DateRangePickerToolbar } from './DateRangePickerToolbar';
 export function useDateRangePickerDefaultizedProps(props, name) {
-  var _themeProps$disableFu, _themeProps$disablePa;
   const utils = useUtils();
   const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
@@ -12,8 +11,7 @@ export function useDateRangePickerDefaultizedProps(props, name) {
     name
   });
   const localeText = React.useMemo(() => {
-    var _themeProps$localeTex;
-    if (((_themeProps$localeTex = themeProps.localeText) == null ? void 0 : _themeProps$localeTex.toolbarTitle) == null) {
+    if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
     }
     return _extends({}, themeProps.localeText, {
@@ -22,8 +20,8 @@ export function useDateRangePickerDefaultizedProps(props, name) {
   }, [themeProps.localeText]);
   return _extends({}, themeProps, {
     localeText,
-    disableFuture: (_themeProps$disableFu = themeProps.disableFuture) != null ? _themeProps$disableFu : false,
-    disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
+    disableFuture: themeProps.disableFuture ?? false,
+    disablePast: themeProps.disablePast ?? false,
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
     slots: _extends({

package/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -4,5 +4,15 @@ import { DateTimeRangePickerProps } from './DateTimeRangePicker.types';
 type DateTimeRangePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: DateTimeRangePickerProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
+/**
+ * Demos:
+ *
+ * - [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DateTimeRangePicker API](https://mui.com/x/api/date-pickers/date-time-range-picker/)
+ */
 declare const DateTimeRangePicker: DateTimeRangePickerComponent;
 export { DateTimeRangePicker };

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -9,6 +9,16 @@ import { useThemeProps } from '@mui/material/styles';
 import { DesktopDateTimeRangePicker } from '../DesktopDateTimeRangePicker';
 import { MobileDateTimeRangePicker } from '../MobileDateTimeRangePicker';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DateTimeRangePicker API](https://mui.com/x/api/date-pickers/date-time-range-picker/)
+ */
 const DateTimeRangePicker = /*#__PURE__*/React.forwardRef(function DateTimeRangePicker(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -312,7 +322,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.d.ts

@@ -1,21 +1,20 @@
 import * as React from 'react';
-import { PickerSelectionState, PickerViewRenderer, TimeViewWithMeridiem, BaseClockProps } from '@mui/x-date-pickers/internals';
+import { PickerSelectionState, PickerViewRenderer, TimeViewWithMeridiem, BaseClockProps, DefaultizedProps } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { DateTimeRangePickerView } from '../internals/models';
 import { DateRange } from '../models';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
-export type DateTimeRangePickerTimeWrapperProps<TDate extends PickerValidDate, TView extends DateTimeRangePickerView, TComponentProps extends Omit<BaseClockProps<TDate, TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>> = Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> & Omit<TComponentProps, 'views' | 'view' | 'onViewChange' | 'value' | 'defaultValue' | 'onChange'> & {
+export type DateTimeRangePickerTimeWrapperProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TDate, TView>, 'value' | 'defaultValue' | 'onChange'>, 'views'>> = Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> & Omit<TComponentProps, 'views' | 'view' | 'onViewChange' | 'value' | 'defaultValue' | 'onChange'> & {
     view: TView;
     onViewChange?: (view: TView) => void;
     views: readonly TView[];
     value?: DateRange<TDate>;
     defaultValue?: DateRange<TDate>;
     onChange?: (value: DateRange<TDate>, selectionState: PickerSelectionState, selectedView: TView) => void;
-    viewRenderer?: PickerViewRenderer<DateRange<TDate>, TView, any, TComponentProps> | null;
+    viewRenderer?: PickerViewRenderer<DateRange<TDate>, TView, TComponentProps, any> | null;
     openTo?: TView;
 };
 /**
  * @ignore - internal component.
  */
-declare function DateTimeRangePickerTimeWrapper<TDate extends PickerValidDate, TView extends DateTimeRangePickerView, TComponentProps extends Omit<BaseClockProps<TDate, TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>>(props: DateTimeRangePickerTimeWrapperProps<TDate, TView, TComponentProps>, ref: React.Ref<HTMLDivElement>): React.ReactNode;
+declare function DateTimeRangePickerTimeWrapper<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TDate, TView>, 'value' | 'defaultValue' | 'onChange'>, 'views'>>(props: DateTimeRangePickerTimeWrapperProps<TDate, TView, TComponentProps>, ref: React.Ref<HTMLDivElement>): React.ReactNode;
 export { DateTimeRangePickerTimeWrapper };

package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -8,7 +8,6 @@ import { calculateRangeChange } from '../internals/utils/date-range-manager';
  * @ignore - internal component.
  */
 function DateTimeRangePickerTimeWrapper(props, ref) {
-  var _ref, _ref2;
   const utils = useUtils();
   const {
       rangePosition,
@@ -24,8 +23,8 @@ function DateTimeRangePickerTimeWrapper(props, ref) {
   if (!viewRenderer) {
     return null;
   }
-  const currentValue = (_ref = rangePosition === 'start' ? value == null ? void 0 : value[0] : value == null ? void 0 : value[1]) != null ? _ref : null;
-  const currentDefaultValue = (_ref2 = rangePosition === 'start' ? defaultValue == null ? void 0 : defaultValue[0] : defaultValue == null ? void 0 : defaultValue[1]) != null ? _ref2 : null;
+  const currentValue = (rangePosition === 'start' ? value?.[0] : value?.[1]) ?? null;
+  const currentDefaultValue = (rangePosition === 'start' ? defaultValue?.[0] : defaultValue?.[1]) ?? null;
   const handleOnChange = (newDate, selectionState, selectedView) => {
     if (!onChange || !value) {
       return;

package/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -39,7 +39,7 @@ const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
   ownerState
 }) => _extends({
   borderBottom: 'none'
-}, (ownerState == null ? void 0 : ownerState.toolbarVariant) !== 'desktop' ? {
+}, ownerState?.toolbarVariant !== 'desktop' ? {
   padding: '12px 8px 0 12px'
 } : {
   paddingBottom: 0
@@ -51,7 +51,7 @@ const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
 })(({
   ownerState
 }) => ({
-  padding: (ownerState == null ? void 0 : ownerState.toolbarVariant) !== 'desktop' ? '12px 8px 12px 12px' : undefined
+  padding: ownerState?.toolbarVariant !== 'desktop' ? '12px 8px 12px 12px' : undefined
 }));
 const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
   const props = useThemeProps({

package/DateTimeRangePicker/shared.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { LocalizedComponent } from '@mui/x-date-pickers/locales';
-import { DefaultizedProps, BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DesktopOnlyTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateTimeValidationProps } from '@mui/x-date-pickers/internals';
+import { DefaultizedProps, BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DesktopOnlyTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { TimeViewRendererProps } from '@mui/x-date-pickers/timeViewRenderers';
 import { DigitalClockSlots, DigitalClockSlotProps } from '@mui/x-date-pickers/DigitalClock';
@@ -33,6 +33,9 @@ export interface BaseDateTimeRangePickerSlotProps<TDate extends PickerValidDate>
      */
     toolbar?: ExportedDateTimeRangePickerToolbarProps;
 }
+export type DateTimeRangePickerRenderers<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<DateRange<TDate>, TView, Omit<DateRangeViewRendererProps<TDate, 'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TDate, TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
+    view: TView;
+}, TAdditionalProps>;
 export interface BaseDateTimeRangePickerProps<TDate extends PickerValidDate> extends Omit<BasePickerInputProps<DateRange<TDate>, TDate, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps<TDate>, BaseDateValidationProps<TDate>, DesktopOnlyTimePickerProps<TDate>, Partial<Pick<UseViewsOptions<DateRange<TDate>, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>>, DateTimeValidationProps<TDate> {
     /**
      * Overridable component slots.
@@ -49,9 +52,7 @@ export interface BaseDateTimeRangePickerProps<TDate extends PickerValidDate> ext
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be the used.
      */
-    viewRenderers?: Partial<PickerViewRendererLookup<DateRange<TDate>, DateTimeRangePickerView, Omit<DateRangeViewRendererProps<TDate, 'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TDate, TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
-        view: DateTimeRangePickerView;
-    }, {}>>;
+    viewRenderers?: Partial<DateTimeRangePickerRenderers<TDate, DateTimeRangePickerView>>;
 }
 type UseDateTimeRangePickerDefaultizedProps<TDate extends PickerValidDate, Props extends BaseDateTimeRangePickerProps<TDate>> = LocalizedComponent<TDate, Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | keyof BaseDateValidationProps<TDate>>, 'views'>> & {
     shouldRenderTimeInASingleColumn: boolean;

package/DateTimeRangePicker/shared.js

@@ -4,14 +4,13 @@ import { useDefaultDates, useUtils, applyDefaultDate, applyDefaultViewProps, res
 import { DateTimeRangePickerToolbar } from './DateTimeRangePickerToolbar';
 import { DateTimeRangePickerTabs } from './DateTimeRangePickerTabs';
 export function useDateTimeRangePickerDefaultizedProps(props, name) {
-  var _themeProps$ampm, _themeProps$disableFu, _themeProps$disablePa, _themeProps$minDateTi, _themeProps$maxDateTi, _themeProps$minDateTi2, _themeProps$maxDateTi2, _themeProps$disableIg, _themeProps$slotProps;
   const utils = useUtils();
   const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
-  const ampm = (_themeProps$ampm = themeProps.ampm) != null ? _themeProps$ampm : utils.is12HourCycleInCurrentLocale();
+  const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const {
     openTo,
     views: defaultViews
@@ -39,13 +38,13 @@ export function useDateTimeRangePickerDefaultizedProps(props, name) {
     thresholdToRenderTimeInASingleColumn,
     views,
     ampm,
-    disableFuture: (_themeProps$disableFu = themeProps.disableFuture) != null ? _themeProps$disableFu : false,
-    disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
-    minDate: applyDefaultDate(utils, (_themeProps$minDateTi = themeProps.minDateTime) != null ? _themeProps$minDateTi : themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, (_themeProps$maxDateTi = themeProps.maxDateTime) != null ? _themeProps$maxDateTi : themeProps.maxDate, defaultDates.maxDate),
-    minTime: (_themeProps$minDateTi2 = themeProps.minDateTime) != null ? _themeProps$minDateTi2 : themeProps.minTime,
-    maxTime: (_themeProps$maxDateTi2 = themeProps.maxDateTime) != null ? _themeProps$maxDateTi2 : themeProps.maxTime,
-    disableIgnoringDatePartForTimeValidation: (_themeProps$disableIg = themeProps.disableIgnoringDatePartForTimeValidation) != null ? _themeProps$disableIg : Boolean(themeProps.minDateTime || themeProps.maxDateTime ||
+    disableFuture: themeProps.disableFuture ?? false,
+    disablePast: themeProps.disablePast ?? false,
+    minDate: applyDefaultDate(utils, themeProps.minDateTime ?? themeProps.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(utils, themeProps.maxDateTime ?? themeProps.maxDate, defaultDates.maxDate),
+    minTime: themeProps.minDateTime ?? themeProps.minTime,
+    maxTime: themeProps.maxDateTime ?? themeProps.maxTime,
+    disableIgnoringDatePartForTimeValidation: themeProps.disableIgnoringDatePartForTimeValidation ?? Boolean(themeProps.minDateTime || themeProps.maxDateTime ||
     // allow digital clocks to correctly check time validity: https://github.com/mui/mui-x/issues/12048
     themeProps.disablePast || themeProps.disableFuture),
     slots: _extends({
@@ -53,7 +52,7 @@ export function useDateTimeRangePickerDefaultizedProps(props, name) {
       toolbar: DateTimeRangePickerToolbar
     }, themeProps.slots),
     slotProps: _extends({}, themeProps.slotProps, {
-      toolbar: _extends({}, (_themeProps$slotProps = themeProps.slotProps) == null ? void 0 : _themeProps$slotProps.toolbar, {
+      toolbar: _extends({}, themeProps.slotProps?.toolbar, {
         ampm
       })
     })