Merge remote-tracking branch 'upstream/next' into core-integration/40757

Author: michaldudak

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/[email protected]`
+
+- [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/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+#### `@mui/[email protected]` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Date Pickers
+
+#### `@mui/[email protected]`
+
+- [pickers] Apply the `layout.tabs` class to `Tabs` slot (#11781) @LukasTy
+- [pickers] Avoid deep imports (#11794) @LukasTy
+- [pickers] Fields typing optimization (#11779) @LukasTy
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`, 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/[email protected]`
+
+- [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_

docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.js

@@ -44,7 +44,7 @@ export default function ColumnSelectorGridCustomizeColumns() {
           toolbar: GridToolbar,
         }}
         slotProps={{
-          columnsPanel: {
+          columnsManagement: {
             getTogglableColumns,
           },
         }}

docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.tsx

@@ -45,7 +45,7 @@ export default function ColumnSelectorGridCustomizeColumns() {
           toolbar: GridToolbar,
         }}
         slotProps={{
-          columnsPanel: {
+          columnsManagement: {
             getTogglableColumns,
           },
         }}

docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.tsx.preview

@@ -6,7 +6,7 @@
     toolbar: GridToolbar,
   }}
   slotProps={{
-    columnsPanel: {
+    columnsManagement: {
       getTogglableColumns,
     },
   }}

docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.js

@@ -25,7 +25,7 @@ export default function ColumnSelectorGridSnap() {
       <DataGrid
         apiRef={apiRef}
         {...data}
-        slotProps={{ columnsPanel: { autoFocusSearchField: false } }}
+        slotProps={{ columnsManagement: { autoFocusSearchField: false } }}
       />
     </div>
   );

docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.tsx

@@ -25,7 +25,7 @@ export default function ColumnSelectorGridSnap() {
       <DataGrid
         apiRef={apiRef}
         {...data}
-        slotProps={{ columnsPanel: { autoFocusSearchField: false } }}
+        slotProps={{ columnsManagement: { autoFocusSearchField: false } }}
       />
     </div>
   );

docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.tsx.preview

@@ -1,5 +1,5 @@
 <DataGrid
   apiRef={apiRef}
   {...data}
-  slotProps={{ columnsPanel: { autoFocusSearchField: false } }}
+  slotProps={{ columnsManagement: { autoFocusSearchField: false } }}
 />

docs/data/data-grid/column-visibility/column-visibility.md

@@ -59,10 +59,12 @@ You can use the `onColumnVisibilityModelChange` prop to listen to the changes to
 
 ## Column visibility panel
 
-The column visibility panel can be opened through the Data Grid toolbar.
-To enable it, you need to add `toolbar: GridToolbar` to the Data Grid `slots` prop.
+The column visibility panel allows the user to control which columns are visible in the Data Grid.
 
-The user can then choose which columns are visible using the _Columns_ button.
+The panel can be opened by:
+
+- Clicking the _Columns_ button in the [toolbar](/x/react-data-grid/components/#toolbar).
+- Clicking the _Manage columns_ button in the [column menu](/x/react-data-grid/column-menu/).
 
 {{"demo": "ColumnSelectorGrid.js", "bg": "inline"}}
 
@@ -79,9 +81,9 @@ In the following demo, the columns panel is disabled, and access to columns `id`
 
 {{"demo": "ColumnSelectorDisabledGrid.js", "bg": "inline"}}
 
-### Customize the list of columns in panel
+### Customize the list of columns in columns management
 
-To show or hide specific columns in the column visibility panel, use the `slotProps.columnsPanel.getTogglableColumns` prop. It should return an array of column field names.
+To show or hide specific columns in the column visibility panel, use the `slotProps.columnsManagement.getTogglableColumns` prop. It should return an array of column field names.
 
 ```tsx
 // stop `id`, `__row_group_by_columns_group__`, and `status` columns to be togglable
@@ -98,7 +100,7 @@ const getTogglableColumns = (columns: GridColDef[]) => {
     toolbar: GridToolbar,
   }}
   slotProps={{
-    columnsPanel: {
+    columnsManagement: {
       getTogglableColumns,
     },
   }}
@@ -107,19 +109,19 @@ const getTogglableColumns = (columns: GridColDef[]) => {
 
 {{"demo": "ColumnSelectorGridCustomizeColumns.js", "bg": "inline"}}
 
-### Disable action buttons
+### Disable actions in footer
 
-To disable `Hide all` or `Show all` buttons in the column visibility panel, pass `disableHideAllButton` or `disableShowAllButton` to `slotProps.columnsPanel`.
+To disable `Show/Hide All` checkbox or `Reset` button in the footer of the columns management component, pass `disableShowHideToggle` or `disableResetButton` to `slotProps.columnsManagement`.
 
 ```tsx
 <DataGrid
   slots={{
     toolbar: GridToolbar,
   }}
   slotProps={{
-    columnsPanel: {
-      disableHideAllButton: true,
-      disableShowAllButton: true,
+    columnsManagement: {
+      disableShowHideToggle: true,
+      disableResetButton: true,
     },
   }}
 />