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

package/AdapterDateFns/AdapterDateFns.js

@@ -79,7 +79,7 @@ export class AdapterDateFns extends AdapterDateFnsBase {
       throw new Error(['MUI: The `date-fns` package v3.x is not compatible with this adapter.', 'Please, install v2.x of the package or use the `AdapterDateFnsV3` instead.'].join('\n'));
     }
     super({
-      locale: locale != null ? locale : defaultLocale,
+      locale: locale ?? defaultLocale,
       formats,
       longFormatters
     });

package/AdapterDateFnsBase/AdapterDateFnsBase.js

@@ -249,8 +249,7 @@ export class AdapterDateFnsBase {
       return value;
     };
     this.getCurrentLocaleCode = () => {
-      var _this$locale;
-      return ((_this$locale = this.locale) == null ? void 0 : _this$locale.code) || 'en-US';
+      return this.locale?.code || 'en-US';
     };
     // Note: date-fns input types are more lenient than this adapter, so we need to expose our more
     // strict signature and delegate to the more lenient signature. Otherwise, we have downstream type errors upon usage.

package/AdapterDateFnsJalali/AdapterDateFnsJalali.js

@@ -315,8 +315,7 @@ export class AdapterDateFnsJalali {
       });
     };
     this.getCurrentLocaleCode = () => {
-      var _this$locale;
-      return ((_this$locale = this.locale) == null ? void 0 : _this$locale.code) || 'fa-IR';
+      return this.locale?.code || 'fa-IR';
     };
     // Note: date-fns input types are more lenient than this adapter, so we need to expose our more
     // strict signature and delegate to the more lenient signature. Otherwise, we have downstream type errors upon usage.
@@ -329,10 +328,9 @@ export class AdapterDateFnsJalali {
       return true;
     };
     this.expandFormat = format => {
-      var _this$locale2;
       // @see https://github.com/date-fns/date-fns/blob/master/src/format/index.js#L31
       const longFormatRegexp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
-      const locale = (_this$locale2 = this.locale) != null ? _this$locale2 : defaultLocale;
+      const locale = this.locale ?? defaultLocale;
       return format.match(longFormatRegexp).map(token => {
         const firstCharacter = token[0];
         if (firstCharacter === 'p' || firstCharacter === 'P') {

package/AdapterDateFnsV3/AdapterDateFnsV3.js

@@ -87,7 +87,7 @@ export class AdapterDateFns extends AdapterDateFnsBase {
       throw new Error('MUI: The minimum supported `date-fns` package version compatible with this adapter is `3.2.x`.');
     }
     super({
-      locale: locale != null ? locale : enUS,
+      locale: locale ?? enUS,
       formats,
       longFormatters
     });

package/AdapterDayjs/AdapterDayjs.js

@@ -251,10 +251,9 @@ export class AdapterDayjs {
       }
       const timezone = this.getTimezone(value);
       if (timezone !== 'UTC') {
-        var _fixedValue$$offset, _value$$offset;
         const fixedValue = value.tz(this.cleanTimezone(timezone), true);
         // @ts-ignore
-        if (((_fixedValue$$offset = fixedValue.$offset) != null ? _fixedValue$$offset : 0) === ((_value$$offset = value.$offset) != null ? _value$$offset : 0)) {
+        if ((fixedValue.$offset ?? 0) === (value.$offset ?? 0)) {
           return value;
         }
         return fixedValue;
@@ -281,9 +280,8 @@ export class AdapterDayjs {
     this.getInvalidDate = () => defaultDayjs(new Date('Invalid date'));
     this.getTimezone = value => {
       if (this.hasTimezonePlugin()) {
-        var _value$$x;
         // @ts-ignore
-        const zone = (_value$$x = value.$x) == null ? void 0 : _value$$x.$timezone;
+        const zone = value.$x?.$timezone;
         if (zone) {
           return zone;
         }

package/AdapterLuxon/AdapterLuxon.js

@@ -229,18 +229,21 @@ export class AdapterLuxon {
     };
     /* istanbul ignore next */
     this.is12HourCycleInCurrentLocale = () => {
-      var _Intl$DateTimeFormat;
       if (typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {
         return true; // Luxon defaults to en-US if Intl not found
       }
-      return Boolean((_Intl$DateTimeFormat = new Intl.DateTimeFormat(this.locale, {
+      return Boolean(new Intl.DateTimeFormat(this.locale, {
         hour: 'numeric'
-      })) == null || (_Intl$DateTimeFormat = _Intl$DateTimeFormat.resolvedOptions()) == null ? void 0 : _Intl$DateTimeFormat.hour12);
+      })?.resolvedOptions()?.hour12);
     };
     this.expandFormat = format => {
       // Extract escaped section to avoid extending them
       const catchEscapedSectionsRegexp = /''|'(''|[^'])+('|$)|[^']*/g;
 
+      // This RegExp tests if a string is only mad of supported tokens
+      const validTokens = [...Object.keys(this.formatTokenMap), 'yyyyy'];
+      const isWordComposedOfTokens = new RegExp(`^(${validTokens.join('|')})+$`);
+
       // Extract words to test if they are a token or a word to escape.
       const catchWordsRegexp = /(?:^|[^a-z])([a-z]+)(?:[^a-z]|$)|([a-z]+)/gi;
       return format.match(catchEscapedSectionsRegexp).map(token => {
@@ -251,12 +254,13 @@ export class AdapterLuxon {
         const expandedToken = DateTime.expandFormat(token, {
           locale: this.locale
         });
-        return expandedToken.replace(catchWordsRegexp, (correspondance, g1, g2) => {
+        return expandedToken.replace(catchWordsRegexp, (substring, g1, g2) => {
           const word = g1 || g2; // words are either in group 1 or group 2
-          if (word === 'yyyyy' || formatTokenMap[word] !== undefined) {
-            return correspondance;
+
+          if (isWordComposedOfTokens.test(word)) {
+            return substring;
           }
-          return `'${correspondance}'`;
+          return `'${substring}'`;
         });
       }).join('')
       // The returned format can contain `yyyyy` which means year between 4 and 6 digits.
@@ -476,8 +480,7 @@ export class AdapterLuxon {
       return weeks;
     };
     this.getWeekNumber = value => {
-      var _value$localWeekNumbe;
-      return (_value$localWeekNumbe = value.localWeekNumber) != null ? _value$localWeekNumbe : value.weekNumber;
+      return value.localWeekNumber ?? value.weekNumber;
     };
     this.getDayOfWeek = value => {
       return value.weekday;

package/AdapterMoment/AdapterMoment.js

@@ -211,17 +211,15 @@ export class AdapterMoment {
     };
     this.getInvalidDate = () => this.moment(new Date('Invalid Date'));
     this.getTimezone = value => {
-      var _value$_z, _ref, _this$moment$defaultZ;
       // @ts-ignore
       // eslint-disable-next-line no-underscore-dangle
-      const zone = (_value$_z = value._z) == null ? void 0 : _value$_z.name;
+      const zone = value._z?.name;
       const defaultZone = value.isUTC() ? 'UTC' : 'system';
 
       // @ts-ignore
-      return (_ref = zone != null ? zone : (_this$moment$defaultZ = this.moment.defaultZone) == null ? void 0 : _this$moment$defaultZ.name) != null ? _ref : defaultZone;
+      return zone ?? this.moment.defaultZone?.name ?? defaultZone;
     };
     this.setTimezone = (value, timezone) => {
-      var _this$moment$defaultZ2, _this$moment$defaultZ3;
       if (this.getTimezone(value) === timezone) {
         return value;
       }
@@ -238,8 +236,9 @@ export class AdapterMoment {
         }
         return value;
       }
-      const cleanZone = timezone === 'default' ? // @ts-ignore
-      (_this$moment$defaultZ2 = (_this$moment$defaultZ3 = this.moment.defaultZone) == null ? void 0 : _this$moment$defaultZ3.name) != null ? _this$moment$defaultZ2 : 'system' : timezone;
+      const cleanZone = timezone === 'default' ?
+      // @ts-ignore
+      this.moment.defaultZone?.name ?? 'system' : timezone;
       if (cleanZone === 'system') {
         return value.clone().local();
       }

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

@@ -35,7 +35,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDateCalendarUtilityClass, classes);
 };
 function useDateCalendarDefaultizedProps(props, name) {
-  var _themeProps$loading, _themeProps$disablePa, _themeProps$disableFu, _themeProps$openTo, _themeProps$views, _themeProps$reduceAni, _themeProps$renderLoa;
   const utils = useUtils();
   const defaultDates = useDefaultDates();
   const defaultReduceAnimations = useDefaultReduceAnimations();
@@ -44,15 +43,15 @@ function useDateCalendarDefaultizedProps(props, name) {
     name
   });
   return _extends({}, themeProps, {
-    loading: (_themeProps$loading = themeProps.loading) != null ? _themeProps$loading : false,
-    disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
-    disableFuture: (_themeProps$disableFu = themeProps.disableFuture) != null ? _themeProps$disableFu : false,
-    openTo: (_themeProps$openTo = themeProps.openTo) != null ? _themeProps$openTo : 'day',
-    views: (_themeProps$views = themeProps.views) != null ? _themeProps$views : ['year', 'day'],
-    reduceAnimations: (_themeProps$reduceAni = themeProps.reduceAnimations) != null ? _themeProps$reduceAni : defaultReduceAnimations,
-    renderLoading: (_themeProps$renderLoa = themeProps.renderLoading) != null ? _themeProps$renderLoa : () => /*#__PURE__*/_jsx("span", {
+    loading: themeProps.loading ?? false,
+    disablePast: themeProps.disablePast ?? false,
+    disableFuture: themeProps.disableFuture ?? false,
+    openTo: themeProps.openTo ?? 'day',
+    views: themeProps.views ?? ['year', 'day'],
+    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/_jsx("span", {
       children: "..."
-    }),
+    })),
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -83,7 +82,6 @@ const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
  * - [DateCalendar API](https://mui.com/x/api/date-pickers/date-calendar/)
  */
 export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps, ref) {
-  var _slots$calendarHeader;
   const utils = useUtils();
   const id = useId();
   const props = useDateCalendarDefaultizedProps(inProps, 'MuiDateCalendar');
@@ -181,10 +179,10 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   const maxDateWithDisabled = disabled && value || maxDate;
   const gridLabelId = `${id}-grid-label`;
   const hasFocus = focusedView !== null;
-  const CalendarHeader = (_slots$calendarHeader = slots == null ? void 0 : slots.calendarHeader) != null ? _slots$calendarHeader : PickersCalendarHeader;
+  const CalendarHeader = slots?.calendarHeader ?? PickersCalendarHeader;
   const calendarHeaderProps = useSlotProps({
     elementType: CalendarHeader,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.calendarHeader,
+    externalSlotProps: slotProps?.calendarHeader,
     additionalProps: {
       views,
       view,
@@ -222,7 +220,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
-      onMonthChange == null || onMonthChange(startOfMonth);
+      onMonthChange?.(startOfMonth);
     } else {
       goToNextView();
       changeMonth(startOfMonth);
@@ -244,7 +242,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
-      onYearChange == null || onYearChange(closestEnabledDate);
+      onYearChange?.(closestEnabledDate);
     } else {
       goToNextView();
       changeMonth(startOfYear);
@@ -254,7 +252,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   const handleSelectedDayChange = useEventCallback(day => {
     if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange(mergeDateAndTime(utils, day, value != null ? value : referenceDate), 'finish', view);
+      return handleValueChange(mergeDateAndTime(utils, day, value ?? referenceDate), 'finish', view);
     }
     return handleValueChange(day, 'finish', view);
   });
@@ -489,7 +487,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.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/DateCalendar/DayCalendar.js

@@ -133,7 +133,6 @@ const PickersCalendarWeek = styled('div', {
   justifyContent: 'center'
 });
 function WrappedDay(_ref) {
-  var _slots$day;
   let {
       parentProps,
       day,
@@ -158,11 +157,11 @@ function WrappedDay(_ref) {
   const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
   const isSelected = selectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
   const isToday = utils.isSameDay(day, now);
-  const Day = (_slots$day = slots == null ? void 0 : slots.day) != null ? _slots$day : PickersDay;
+  const Day = slots?.day ?? PickersDay;
   // We don't want to pass to ownerState down, to avoid re-rendering all the day whenever a prop changes.
   const _useSlotProps = useSlotProps({
       elementType: Day,
-      externalSlotProps: slotProps == null ? void 0 : slotProps.day,
+      externalSlotProps: slotProps?.day,
       additionalProps: _extends({
         disableHighlightToday,
         showDaysOutsideCurrentMonth,
@@ -268,7 +267,7 @@ export function DayCalendar(inProps) {
     name: 'DayCalendar',
     state: 'hasFocus',
     controlled: hasFocus,
-    default: autoFocus != null ? autoFocus : false
+    default: autoFocus ?? false
   });
   const [internalFocusedDay, setInternalFocusedDay] = React.useState(() => focusedDay || now);
   const handleDaySelect = useEventCallback(day => {
@@ -281,7 +280,7 @@ export function DayCalendar(inProps) {
     if (!isDateDisabled(day)) {
       onFocusedDayChange(day);
       setInternalFocusedDay(day);
-      onFocusedViewChange == null || onFocusedViewChange(true);
+      onFocusedViewChange?.(true);
       setInternalHasFocus(true);
     }
   };
@@ -350,7 +349,7 @@ export function DayCalendar(inProps) {
   const handleFocus = useEventCallback((event, day) => focusDay(day));
   const handleBlur = useEventCallback((event, day) => {
     if (internalHasFocus && utils.isSameDay(internalFocusedDay, day)) {
-      onFocusedViewChange == null || onFocusedViewChange(false);
+      onFocusedViewChange?.(false);
     }
   });
   const currentMonthNumber = utils.getMonth(currentMonth);

package/DateField/DateField.js

@@ -23,7 +23,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [DateField API](https://mui.com/x/api/date-pickers/date-field/)
  */
 const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, inRef) {
-  var _slots$textField;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiDateField'
@@ -36,10 +35,10 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, inRe
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField;
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     externalForwardedProps: other,
     additionalProps: {
       ref: inRef
@@ -242,7 +241,7 @@ process.env.NODE_ENV !== "production" ? DateField.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/DatePicker/DatePicker.js

@@ -266,7 +266,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.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/DatePicker/shared.d.ts

@@ -18,6 +18,7 @@ export interface BaseDatePickerSlots<TDate extends PickerValidDate> extends Date
 export interface BaseDatePickerSlotProps<TDate extends PickerValidDate> extends DateCalendarSlotProps<TDate> {
     toolbar?: ExportedDatePickerToolbarProps;
 }
+export type DatePickerViewRenderers<TDate extends PickerValidDate, TView extends DateView, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<TDate | null, TView, DateViewRendererProps<TDate, TView>, TAdditionalProps>;
 export interface BaseDatePickerProps<TDate extends PickerValidDate> extends BasePickerInputProps<TDate | null, TDate, DateView, DateValidationError>, ExportedDateCalendarProps<TDate> {
     /**
      * Overridable component slots.
@@ -34,7 +35,7 @@ export interface BaseDatePickerProps<TDate extends PickerValidDate> extends Base
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be the used.
      */
-    viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, DateView, DateViewRendererProps<TDate, DateView>, {}>>;
+    viewRenderers?: Partial<DatePickerViewRenderers<TDate, DateView>>;
 }
 type UseDatePickerDefaultizedProps<TDate extends PickerValidDate, Props extends BaseDatePickerProps<TDate>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | keyof BaseDateValidationProps<TDate>>>;
 export declare function useDatePickerDefaultizedProps<TDate extends PickerValidDate, Props extends BaseDatePickerProps<TDate>>(props: Props, name: string): UseDatePickerDefaultizedProps<TDate, Props>;