@mui/x-date-pickers 7.0.0-alpha.9 → 7.0.0-beta.0

package/CHANGELOG.md

@@ -3,6 +3,106 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-beta.0
+
+_Jan 26, 2024_
+
+We are glad to announce MUI X v7 beta!
+This version has several improvements, bug fixes, and exciting features 🎉.
+We want to offer a big thanks to the 7 contributors who made this release possible ✨:
+
+- 🚀 Release the [Date Time Range Picker](https://next.mui.com/x/react-date-pickers/date-time-range-picker/) component (#9528) @LukasTy
+
+  <img src="https://github.com/mui/mui-x/assets/4941090/122bb7bc-5e72-4e11-a8e5-96f3026de922" width="510" height="652" alt="Date Time Range Picker example" />
+
+- 🎁 New column management panel design for the Data Grid (#11770) @MBilalShafi
+
+  <img width="310" alt="image" src="https://github.com/mui/mui-x/assets/12609561/a79dac8b-d54d-4e69-a63a-ef78f3993f37">
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The columns management component has been redesigned and the component was extracted from the `ColumnsPanel` which now only serves as a wrapper to display the component above the headers as a panel. As a result, a new slot `columnsManagement` and the related prop `slotProps.columnsManagement` have been introduced. The props corresponding to the columns management component which were previously passed to the prop `slotProps.columnsPanel` should now be passed to `slotProps.columnsManagement`. `slotProps.columnsPanel` could still be used to override props corresponding to the `Panel` component used in `ColumnsPanel` which uses [`Popper`](https://next.mui.com/material-ui/react-popper/) component under the hood.
+
+  ```diff
+   <DataGrid
+    slotProps={{
+  -   columnsPanel: {
+  +   columnsManagement: {
+        sort: 'asc',
+        autoFocusSearchField: false,
+      },
+    }}
+   />
+  ```
+
+- `Show all` and `Hide all` buttons in the `ColumnsPanel` have been combined into one `Show/Hide All` toggle in the new columns management component. The related props `disableShowAllButton` and `disableHideAllButton` have been replaced with a new prop `disableShowHideToggle`.
+
+  ```diff
+   <DataGrid
+  -  disableShowAllButton
+  -  disableHideAllButton
+  +  disableShowHideToggle
+   />
+  ```
+
+#### `@mui/x-data-grid@7.0.0-beta.0`
+
+- [DataGrid] Export `GridColumnTypes` interface for custom column types (#11742) @cherniavskii
+- [DataGrid] Initialize `apiRef` early (#11792) @cherniavskii
+- [DataGrid] New column management panel design (#11770) @MBilalShafi
+- [DataGrid] Fix support for tree with more than 50,000 children (#11757) @zenazn
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.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-beta.0`.
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.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-beta.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.0`
+
+- [pickers] Apply the `layout.tabs` class to `Tabs` slot (#11781) @LukasTy
+- [pickers] Avoid deep imports (#11794) @LukasTy
+- [pickers] Fields typing optimization (#11779) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.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-beta.0`, plus:
+
+- [pickers] Add `DateTimeRangePicker` component (#9528) @LukasTy
+- [pickers] Add `DateTimeRangePicker` theme augmentation (#11814) @LukasTy
+- [DateRangePicker] Remove `calendars` prop on `Mobile` (#11752) @LukasTy
+
+### Tree View / `@mui/x-tree-view@7.0.0-beta.0`
+
+- [TreeView] Remove unused props from prop-types and typing (#11778) @flaviendelangle
+- [TreeView] Throw an error when two items have the same id (#11715) @flaviendelangle
+
+### Docs
+
+- [docs] Add `contextValue` to the headless tree view doc (#11705) @flaviendelangle
+- [docs] Add section for the `disableSelection` prop (#11821) @flaviendelangle
+- [docs] Fix brand name non-breaking space (#11758) @oliviertassinari
+- [docs] Fix typo in Data Grid components page (#11775) @flaviendelangle
+- [docs] Fix use of quote, should use callout (#11759) @oliviertassinari
+- [docs] Improve error message for MUI Vale rule @oliviertassinari
+- [docs] Include `DateTimeRangePicker` in relevant demos (#11815) @LukasTy
+- [docs] Add recipe for sorting row groups by the number of child rows (#11164) @cherniavskii
+
+### Core
+
+- [core] Cleanup script and alias setup (#11749) @LukasTy
+- [core] Polish issue templates @oliviertassinari
+- [code-infra] Update prettier and pretty-quick (#11735) @Janpot
+
 ## 7.0.0-alpha.9
 
 _Jan 19, 2024_
@@ -138,14 +238,14 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
 #### Breaking changes
 
 - The `expandIcon` / `defaultExpandIcon` props, used to expand the children of a node (rendered when it is collapsed),
-is now defined as a slot both on the Tree View and the Tree Item components.
+  is now defined as a slot both on the Tree View and the Tree Item components.
 
   If you were using the `ChevronRight` icon from `@mui/icons-material`,
   you can stop passing it to your component because it is now the default value:
 
   ```diff
   -import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-  
+
    <SimpleTreeView
   -  defaultExpandIcon={<ChevronRightIcon />}
    >
@@ -180,14 +280,14 @@ is now defined as a slot both on the Tree View and the Tree Item components.
   ```
 
 - The `collapseIcon` / `defaultCollapseIcon` props, used to collapse the children of a node (rendered when it is expanded),
-is now defined as a slot both on the Tree View and the Tree Item components.
+  is now defined as a slot both on the Tree View and the Tree Item components.
 
   If you were using the `ExpandMore` icon from `@mui/icons-material`,
   you can stop passing it to your component because it is now the default value:
 
   ```diff
   - import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-  
+
     <SimpleTreeView
   -   defaultCollapseIcon={<ExpandMoreIcon />}
     >
@@ -227,14 +327,14 @@ is now defined as a slot both on the Tree View and the Tree Item components.
   ```diff
   -import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem';
   +import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem';
-  
+
    const CustomContent = React.forwardRef((props, ref) => {
   -  const { disabled } = useTreeItem(props.nodeId);
   +  const { disabled } = useTreeItemState(props.nodeId);
-  
+
      // Render some UI
    });
-  
+
    function App() {
      return (
        <SimpleTreeView>
@@ -412,7 +512,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.8`.
 
 - [docs] Fix parsing of `x-date-pickers-pro` demo adapter imports (#11628) @LukasTy
 - [docs] Improve `git diff` format @oliviertassinari
-- [docs] Push up the MUI X brand (#11533) @oliviertassinari
+- [docs] Push up the MUI X brand (#11533) @oliviertassinari
 - [docs] Remove old data grid translation files (#11646) @cherniavskii
 - [docs] Improve Server-side data grid docs (#11589) @oliviertassinari
 - [docs] Improve charts landing page (#11570) @oliviertassinari
@@ -422,8 +522,8 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.8`.
 - [core] Lock `jsdom` version (#11652) @cherniavskii
 - [core] Remove PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD (#11608) @oliviertassinari
 - [core] Simplify isSsr logic (#11606) @oliviertassinari
-- [core] Sync playwright cache between MUI X and Material UI (#11607) @oliviertassinari
-- [core] Use MUI X official name in errors (#11645) @oliviertassinari
+- [core] Sync playwright cache between MUI X and Material UI (#11607) @oliviertassinari
+- [core] Use MUI X official name in errors (#11645) @oliviertassinari
 
 ## 7.0.0-alpha.7
 
@@ -455,7 +555,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
     items={MUI_X_PRODUCTS}
     defaultCollapseIcon={<ExpandMoreIcon />}
     defaultExpandIcon={<ChevronRightIcon />}
-  />
+  />;
   ```
 
 - 🌍 Improve Czech (cs-CZ) locale on the Data Grid
@@ -559,10 +659,10 @@ 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] Localize the issue template to MUI X (#11511) @oliviertassinari
 - [core] Regen api files (#11542) @flaviendelangle
 - [core] Remove issue emoji @oliviertassinari
-- [core] Sync the release instructions with MUI Core @oliviertassinari
+- [core] Sync the release instructions with MUI Core @oliviertassinari
 - [core] Yaml format match most common convention @oliviertassinari
 
 ## 7.0.0-alpha.6
@@ -600,6 +700,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
     getOptionLabel: (value: any) => value.name,
   };
   ```
+
 - 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.
@@ -693,7 +794,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.5`.
 #### Breaking changes
 
 - The slot interfaces got renamed to match with `@mui/base` naming.
-The `SlotsComponent` suffix has been replaced with `Slots` and `SlotsComponentsProps` with `SlotProps`.
+  The `SlotsComponent` suffix has been replaced with `Slots` and `SlotsComponentsProps` with `SlotProps`.
 
   ```diff
   -DateCalendarSlotsComponent
@@ -1071,7 +1172,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.3`.
 - [docs] Polish Next.js header description @oliviertassinari
 - [docs] Remove the `newFeature` flag on v6 features (#11168) @flaviendelangle
 - [docs] Simplify a bit chart demo (#11173) @oliviertassinari
-- [docs] Standardize the usage of callouts in the MUI X docs (#7127) @samuelsycamore
+- [docs] Standardize the usage of callouts in the MUI X docs (#7127) @samuelsycamore
 - [docs] Adjust the Data Grid demo page design (#11231) @danilo-leal
 
 ### Core
@@ -1460,15 +1561,15 @@ And if you need the exact same output you can apply the following transformation
    // For Day.js
   -const isoString = adapter.toISO(value);
   +const isoString = value.toISOString();
-  
+
    // For Luxon
   -const isoString = adapter.toISO(value);
   +const isoString = value.toUTC().toISO({ format: 'extended' });
-  
+
    // For DateFns
   -const isoString = adapter.toISO(value);
   +const isoString = dateFns.formatISO(value, { format: 'extended' });
-  
+
    // For Moment
   -const isoString = adapter.toISO(value);
   +const isoString = value.toISOString();
@@ -1836,7 +1937,7 @@ Same changes as in `@mui/x-date-pickers@6.19.0`.
 
 - [docs] Add missing component @oliviertassinari
 - [docs] Fix parsing of `x-date-pickers-pro` demo adapter imports (#11637) @LukasTy
-- [docs] Push up the MUI X brand (#11533) @oliviertassinari
+- [docs] Push up the MUI X brand (#11533) @oliviertassinari
 - [docs] Improve Server-side data grid docs (#11589) @oliviertassinari
 - [docs] Add demo to the charts overview page (#11586) @danilo-leal
 - [docs] Fix 404 links in the docs @oliviertassinari
@@ -2196,7 +2297,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
 - 🥧 Pie charts are now animated.
 - 📈 Line charts now support partial data, and can interpolate missing data https://mui.com/x/react-charts/lines/#skip-missing-points.
 
- <img src="https://github.com/mui/mui-x/assets/3165635/d2d50b1b-ee29-4e4c-9ebe-629c06f3093e" width="683" height="436" />
+ <img src="https://github.com/mui/mui-x/assets/3165635/d2d50b1b-ee29-4e4c-9ebe-629c06f3093e" width="683" height="436" alt="Charts partial data" />
 
 - ✨ The data grid allows to ignore [diacritics](https://en.wikipedia.org/wiki/Diacritic) when filtering.
 - 📚 Documentation improvements
@@ -2690,7 +2791,7 @@ Same changes as in `@mui/x-date-pickers@6.15.0`.
 - [docs] Add missing MIT packages on the Licensing page (#10348) @flaviendelangle
 - [docs] Clearer component pattern @oliviertassinari
 - [docs] Easier to understand demo (#10370) @oliviertassinari
-- [docs] Fix `301` to Material UI @oliviertassinari
+- [docs] Fix `301` to Material UI @oliviertassinari
 - [docs] Improve the column visibility section (#10327) @MBilalShafi
 - [docs] Improve the documentation section `rowIdentifier` (#10326) @MBilalShafi
 - [docs] Improve pickers localization documentation (#10202) @flaviendelangle
@@ -2768,12 +2869,12 @@ Same changes as in `@mui/x-date-pickers@6.14.0`.
 - [docs] Add conditional range picker props example (#10227) @LukasTy
 - [docs] Add toolbar to the multi-filters demo (#10223) @MBilalShafi
 - [docs] Avoid the use of "We" @oliviertassinari
-- [docs] Clarify MUI vs. MUI Core difference @oliviertassinari
+- [docs] Clarify MUI vs. MUI Core difference @oliviertassinari
 - [docs] Enable `ariaV7` flag for demos using `useDemoData` hook (#10204) @cherniavskii
 - [docs] Fix Tree View link to API references (#10282) @oliviertassinari
 - [docs] Fix image layout shift (#10313) @oliviertassinari
-- [docs] Fix link to MUI X from readme logo @oliviertassinari
-- [docs] Fix redirection to Base UI URLs @oliviertassinari
+- [docs] Fix link to MUI X from readme logo @oliviertassinari
+- [docs] Fix redirection to Base UI URLs @oliviertassinari
 - [docs] Improve Tree View demos (#10268) @oliviertassinari
 - [docs] Improve docs for ref type props (#10273) @michelengelen
 - [docs] Improve npm package README (#10269) @oliviertassinari
@@ -2857,7 +2958,7 @@ Same changes as in `@mui/x-date-pickers@6.13.0`, plus:
 - [docs] Improve the week picker example (#8257) @flaviendelangle
 - [docs] Include code links in the data grid demo (#10219) @cherniavskii
 - [docs] Polish page for SEO (#10216) @oliviertassinari
-- [docs] Use `Base UI` `Portal` for the quick filter recipe (#10188) @DanailH
+- [docs] Use `Base UI` `Portal` for the quick filter recipe (#10188) @DanailH
 
 ### Core
 
@@ -3118,7 +3219,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 
 - ⌚️ Move the tree view component from `@mui/lab` package
 
-  The `<TreeView />` component has been moved to the MUI X repository.
+  The `<TreeView />` component has been moved to the MUI X repository.
   It is now accessible from its own package: `@mui/x-tree-view`.
 
 - 🌍 Improve Hebrew (he-IL), Finnish (fi-FI), and Italian (it-IT) locales on the data grid
@@ -3180,7 +3281,7 @@ Same changes as in `@mui/x-date-pickers@6.11.0`.
 
 - [docs] Add Tree View doc (#9825) @flaviendelangle
 - [docs] Add charts nav item (#9821) @LukasTy
-- [docs] Add charts to MUI X introduction pages (#9704) @joserodolfofreitas
+- [docs] Add charts to MUI X introduction pages (#9704) @joserodolfofreitas
 - [docs] Add example for avoiding picker views layout shift (#9781) @noraleonte
 - [docs] Consistency of Next.js App Router @oliviertassinari
 - [docs] Fix API page regression: bring back slots section (#9866) @alexfauquette
@@ -3249,7 +3350,7 @@ Same changes as in `@mui/x-date-pickers@6.10.2`.
 ### Docs
 
 - [docs] Add `pnpm` in more places @oliviertassinari
-- [docs] Add `pnpm` installation instructions for MUI X (#9707) @richbustos
+- [docs] Add `pnpm` installation instructions for MUI X (#9707) @richbustos
 - [docs] Align pickers "uncontrolled vs controlled" sections (#9772) @LukasTy
 - [docs] Apply style guide to the data grid Layout page (#9673) @richbustos
 - [docs] Differentiate between packages in `slotProps` docs (#9668) @cherniavskii
@@ -3558,7 +3659,7 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
 
 - 🚀 Introducing UTC and timezone support for pickers.
 
-  <img width="774" src="https://github.com/mui/mui-x/assets/3165635/ad95a404-ee67-4aff-b996-ad6cbb322348">
+  <img width="774" src="https://github.com/mui/mui-x/assets/3165635/ad95a404-ee67-4aff-b996-ad6cbb322348" alt="Pickers time zone switching">
 
   Visit the [documentation](https://mui.com/x/react-date-pickers/timezone/) to learn how to use it.
 
@@ -3610,7 +3711,7 @@ Same changes as in `@mui/x-date-pickers@6.9.0`.
 
 - [docs] Add examples of using different time view renderers (#9360) @LukasTy
 - [docs] Add recipe for single-click editing (#8365) @m4theushw
-- [docs] Fix Base UI references (#9349) @oliviertassinari
+- [docs] Fix Base UI references (#9349) @oliviertassinari
 - [docs] Fix random screenshot generation (#9364) @cherniavskii
 - [docs] Remove random generation from chart doc example (#9343) @flaviendelangle
 - [docs] Sync h1 with sidenav link (#9252) @oliviertassinari
@@ -3794,7 +3895,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - 🚀 New date time picking UI on [`DesktopDateTimePicker`](https://mui.com/x/react-date-pickers/date-time-picker/)
 
-  <img src="https://github.com/mui/mui-x/assets/3165635/4e1fe9f9-03eb-4f23-99dd-80212b21fb23" width="840" height="506" />
+  <img src="https://github.com/mui/mui-x/assets/3165635/4e1fe9f9-03eb-4f23-99dd-80212b21fb23" width="840" height="506" alt="Desktop Date Time Picker example" />
 
 - 🚀 Performance improvements
 - 🐞 Bugfixes
@@ -3870,7 +3971,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 - 💫 Introduce filtering on column headers for `DataGridPro` and `DataGridPremium`:
 
-  <img src="https://github.com/mui/mui-x/releases/download/v6.5.0/recording.gif" width="840" height="506" />
+  <img src="https://github.com/mui/mui-x/releases/download/v6.5.0/recording.gif" width="840" height="506" alt="Filtering on column headers example" />
 
   See [the documentation](https://mui.com/x/react-data-grid/filtering/header-filters/) for more information
 
@@ -4029,7 +4130,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - 🚀 New [time-picking UI](https://mui.com/x/react-date-pickers/digital-clock/) designed for desktops (#7958) @LukasTy
 
-  <img src="https://user-images.githubusercontent.com/4941090/235072007-de39a397-e4a4-4c98-8e10-5ee4ad440108.gif" width="494" />
+  <img src="https://user-images.githubusercontent.com/4941090/235072007-de39a397-e4a4-4c98-8e10-5ee4ad440108.gif" width="494" alt="New digital clock time picker" />
 
 - ✨ Picker fields [now always include a leading zero](https://mui.com/x/react-date-pickers/adapters-locale/#respect-leading-zeros-in-fields) on digit sections (#8527) @flaviendelangle
 - 🌍 Improve Chinese (zh-CN), French (fr-FR), and Turkish (tr-TR) locales
@@ -4405,7 +4506,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [docs] Add a warning for `luxon` macro tokens (#8245) @flaviendelangle
 - [docs] Complete pickers customization pages (#8066) @alexfauquette
 - [docs] Fix 301 redirection @oliviertassinari
-- [docs] Fix 404 links to customization Material UI APIs (#8200) @oliviertassinari
+- [docs] Fix 404 links to customization Material UI APIs (#8200) @oliviertassinari
 - [docs] Fix `moment-hijri` demo (#8255) @LukasTy
 - [docs] Improve migration diff (#8240) @oliviertassinari
 - [docs] Change **What's new** page url to point to announcement blog post (#8186) @joserodolfofreitas
@@ -4836,7 +4937,7 @@ We'd like to offer a big thanks to the 17 contributors who made this release pos
 
 _Jan 19, 2023_
 
-After a long period in alpha, we're glad to announce the first MUI X v6 beta!
+After a long period in alpha, we're glad to announce the first MUI X v6 beta!
 We encourage you to try out this version, packed with improvements, bug fixes, and a few highlighted features ✨:
 
 **Data Grid**
@@ -6092,7 +6193,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 #### Breaking changes
 
 - The `ToolbarComponent` has been replaced by a `Toolbar` component slot.
-  You can find more information about this pattern in the [Base UI documentation](https://mui.com/base-ui/getting-started/usage/#shared-props):
+  You can find more information about this pattern in the [Base UI documentation](https://mui.com/base-ui/getting-started/usage/#shared-props):
 
   ```diff
    // Same on all other pickers
@@ -6243,7 +6344,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 
 #### Breaking changes
 
-- All the props used by the mobile and desktop wrappers to override components or components' props have been replaced by component slots. You can find more information about this pattern in the [Base UI documentation](https://mui.com/base-ui/getting-started/usage/#shared-props).
+- All the props used by the mobile and desktop wrappers to override components or components' props have been replaced by component slots. You can find more information about this pattern in the [Base UI documentation](https://mui.com/base-ui/getting-started/usage/#shared-props).
 
   Some of the names have also been prefixed by `desktop` when it was unclear that the behavior was only applied on the desktop version of the pickers (or the responsive version when used on a desktop).
 
@@ -6432,7 +6533,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 #### Breaking changes
 
 - The `renderDay` prop has been replaced by a `Day` component slot.
-  You can find more information about this pattern in the [Base UI documentation](https://mui.com/base-ui/getting-started/usage/#shared-props).
+  You can find more information about this pattern in the [Base UI documentation](https://mui.com/base-ui/getting-started/usage/#shared-props).
 
   ```diff
    // Same for any other date, date time or date range picker.

package/DateTimePicker/DateTimePickerTabs.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { TimeIcon, DateRangeIcon } from '../icons';
 import { useLocaleText } from '../internals/hooks/useUtils';
 import { getDateTimePickerTabsUtilityClass } from './dateTimePickerTabsClasses';
@@ -68,7 +69,8 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     onViewChange,
     timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
     view,
-    hidden = typeof window === 'undefined' || window.innerHeight < 667
+    hidden = typeof window === 'undefined' || window.innerHeight < 667,
+    className
   } = props;
   const localeText = useLocaleText();
   const classes = useUtilityClasses(props);
@@ -83,7 +85,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,
-    className: classes.root,
+    className: clsx(className, classes.root),
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -108,6 +110,7 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * Date tab icon.
    * @default DateRange
@@ -119,7 +122,7 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    */
   hidden: PropTypes.bool,
   /**
-   * Callback called when a tab is clicked
+   * Callback called when a tab is clicked.
    * @template TView
    * @param {TView} view The view to open
    */

package/DateTimePicker/DateTimePickerToolbar.d.ts

@@ -2,16 +2,21 @@ import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { DateTimePickerToolbarClasses } from './dateTimePickerToolbarClasses';
 import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models';
+import { MakeOptional } from '../internals/models/helpers';
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
     ampm?: boolean;
     ampmInClock?: boolean;
 }
-export interface DateTimePickerToolbarProps<TDate> extends ExportedDateTimePickerToolbarProps, BaseToolbarProps<TDate | null, DateOrTimeViewWithMeridiem> {
+export interface DateTimePickerToolbarProps<TDate> extends ExportedDateTimePickerToolbarProps, MakeOptional<BaseToolbarProps<TDate | null, DateOrTimeViewWithMeridiem>, 'view'> {
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<DateTimePickerToolbarClasses>;
     toolbarVariant?: WrapperVariant;
+    /**
+     * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
+     */
+    toolbarTitle?: React.ReactNode;
 }
 /**
  * Demos:

package/DateTimePicker/DateTimePickerToolbar.js

@@ -1,10 +1,11 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant"];
+const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant", "toolbarTitle", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled, useThemeProps, useTheme } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import clsx from 'clsx';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
@@ -13,6 +14,8 @@ import { dateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass } fr
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
 import { formatMeridiem } from '../internals/utils/date-utils';
+import { pickersToolbarTextClasses } from '../internals/components/pickersToolbarTextClasses';
+import { pickersToolbarClasses } from '../internals';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -39,13 +42,18 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
 })(({
   theme,
   ownerState
-}) => ({
+}) => _extends({
   paddingLeft: ownerState.toolbarVariant === 'desktop' && !ownerState.isLandscape ? 24 : 16,
   paddingRight: ownerState.toolbarVariant === 'desktop' && !ownerState.isLandscape ? 0 : 16,
   borderBottom: ownerState.toolbarVariant === 'desktop' ? `1px solid ${(theme.vars || theme).palette.divider}` : undefined,
   borderRight: ownerState.toolbarVariant === 'desktop' && ownerState.isLandscape ? `1px solid ${(theme.vars || theme).palette.divider}` : undefined,
   justifyContent: 'space-around',
   position: 'relative'
+}, ownerState.toolbarVariant === 'desktop' && {
+  [`& .${pickersToolbarClasses.content} .${pickersToolbarTextClasses.selected}`]: {
+    color: (theme.vars || theme).palette.primary.main,
+    fontWeight: theme.typography.fontWeightBold
+  }
 }));
 DateTimePickerToolbarRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -182,7 +190,9 @@ function DateTimePickerToolbar(inProps) {
       views,
       disabled,
       readOnly,
-      toolbarVariant = 'mobile'
+      toolbarVariant = 'mobile',
+      toolbarTitle: inToolbarTitle,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
@@ -198,6 +208,7 @@ function DateTimePickerToolbar(inProps) {
   const classes = useUtilityClasses(_extends({}, ownerState, {
     theme
   }));
+  const toolbarTitle = inToolbarTitle != null ? inToolbarTitle : localeText.dateTimePickerToolbarTitle;
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
   const dateText = React.useMemo(() => {
     if (!value) {
@@ -209,9 +220,9 @@ function DateTimePickerToolbar(inProps) {
     return utils.format(value, 'shortDate');
   }, [value, toolbarFormat, toolbarPlaceholder, utils]);
   return /*#__PURE__*/_jsxs(DateTimePickerToolbarRoot, _extends({
-    toolbarTitle: localeText.dateTimePickerToolbarTitle,
     isLandscape: isLandscape,
-    className: classes.root
+    className: clsx(classes.root, className),
+    toolbarTitle: toolbarTitle
   }, other, {
     ownerState: ownerState,
     children: [/*#__PURE__*/_jsxs(DateTimePickerToolbarDateContainer, {
@@ -236,14 +247,14 @@ function DateTimePickerToolbar(inProps) {
       children: [/*#__PURE__*/_jsxs(DateTimePickerToolbarTimeDigitsContainer, {
         className: classes.timeDigitsContainer,
         ownerState: ownerState,
-        children: [views.includes('hours') && /*#__PURE__*/_jsx(PickersToolbarButton, {
-          variant: isDesktop ? 'h5' : 'h3',
-          width: isDesktop && !isLandscape ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
-          onClick: () => onViewChange('hours'),
-          selected: view === 'hours',
-          value: value ? formatHours(value) : '--'
-        }), views.includes('minutes') && /*#__PURE__*/_jsxs(React.Fragment, {
-          children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
+        children: [views.includes('hours') && /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(PickersToolbarButton, {
+            variant: isDesktop ? 'h5' : 'h3',
+            width: isDesktop && !isLandscape ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
+            onClick: () => onViewChange('hours'),
+            selected: view === 'hours',
+            value: value ? formatHours(value) : '--'
+          }), /*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
             variant: isDesktop ? 'h5' : 'h3',
             value: ":",
             className: classes.separator,
@@ -252,8 +263,9 @@ function DateTimePickerToolbar(inProps) {
             variant: isDesktop ? 'h5' : 'h3',
             width: isDesktop && !isLandscape ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
             onClick: () => onViewChange('minutes'),
-            selected: view === 'minutes',
-            value: value ? utils.format(value, 'minutes') : '--'
+            selected: view === 'minutes' || !views.includes('minutes') && view === 'hours',
+            value: value ? utils.format(value, 'minutes') : '--',
+            disabled: !views.includes('minutes')
           })]
         }), views.includes('seconds') && /*#__PURE__*/_jsxs(React.Fragment, {
           children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
@@ -335,12 +347,16 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: PropTypes.node,
+  /**
+   * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
+   */
+  toolbarTitle: PropTypes.node,
   toolbarVariant: PropTypes.oneOf(['desktop', 'mobile']),
   value: PropTypes.any,
   /**
    * Currently visible picker view.
    */
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired,
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
 } : void 0;
 export { DateTimePickerToolbar };

package/PickersLayout/PickersLayout.types.d.ts

@@ -8,6 +8,7 @@ import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/useP
 import { PickersLayoutClasses } from './pickersLayoutClasses';
 import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
+import { ExportedPickersShortcutProps } from '../PickersShortcuts/PickersShortcuts';
 export interface ExportedPickersLayoutSlots<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Custom component for the action bar, it is placed below the picker views.
@@ -87,11 +88,11 @@ export interface PickersLayoutProps<TValue, TDate, TView extends DateOrTimeViewW
      */
     slotProps?: PickersLayoutSlotProps<TValue, TDate, TView>;
 }
-export interface SubComponents {
-    toolbar: React.ReactNode;
+export interface SubComponents<TValue> {
+    toolbar: React.ReactElement<ExportedBaseToolbarProps> | null;
     content: React.ReactNode;
-    tabs: React.ReactNode;
-    actionBar: React.ReactNode;
-    shortcuts: React.ReactNode;
+    tabs: React.ReactElement<ExportedBaseTabsProps> | null;
+    actionBar: React.ReactElement<PickersActionBarProps>;
+    shortcuts: React.ReactElement<ExportedPickersShortcutProps<TValue>> | null;
 }
 export {};

package/PickersLayout/pickersLayoutClasses.js

@@ -1,5 +1,6 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getPickersLayoutUtilityClass(slot) {
   return generateUtilityClass('MuiPickersLayout', slot);
 }
-export const pickersLayoutClasses = generateUtilityClasses('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'shortcuts']);
+export const pickersLayoutClasses = generateUtilityClasses('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'tabs', 'shortcuts']);

package/PickersLayout/usePickerLayout.d.ts

@@ -1,6 +1,6 @@
 import { PickersLayoutProps, SubComponents } from './PickersLayout.types';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-interface UsePickerLayoutResponse extends SubComponents {
+interface UsePickerLayoutResponse<TValue> extends SubComponents<TValue> {
 }
-declare const usePickerLayout: <TValue, TDate, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TDate, TView>) => UsePickerLayoutResponse;
+declare const usePickerLayout: <TValue, TDate, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TDate, TView>) => UsePickerLayoutResponse<TValue>;
 export default usePickerLayout;