Merge branch 'master' into datasource-row-grouping

changelogOld/CHANGELOG.v6.md

@@ -1485,7 +1485,7 @@ Same changes as in `@mui/x-date-pickers@6.13.0`, plus:
 - [docs] Fix charts demo using too deep import (#10263) @LukasTy
 - [docs] Fix `e.g.` typo @oliviertassinari
 - [docs] Fix npm package indentation @oliviertassinari
-- [docs] Fix typo in tree view docs @oliviertassinari
+- [docs] Fix typo in Tree View docs @oliviertassinari
 - [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
@@ -1546,7 +1546,7 @@ Same changes as in `@mui/x-date-pickers@6.12.1`.
 
 - [docs] Add `DemoContainer` and `DemoItem` JSDoc (#10186) @LukasTy
 - [docs] Add link to `custom layout` page (#10184) @LukasTy
-- [docs] Add tree view nav item (#10181) @LukasTy
+- [docs] Add Tree View nav item (#10181) @LukasTy
 - [docs] Fix wrong chart tooltip reference (#10169) @oliviertassinari
 - [docs] Improve chart SEO (#10170) @oliviertassinari
 - [docs] Precise expired license key condition (#10165) @oliviertassinari
@@ -1748,7 +1748,7 @@ _Aug 4, 2023_
 
 We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
 
-- ⌚️ Move the tree view component from `@mui/lab` package
+- ⌚️ Move the Tree View component from `@mui/lab` package
 
   The `<TreeView />` component has been moved to the MUI X repository.
   It is now accessible from its own package: `@mui/x-tree-view`.
@@ -1804,7 +1804,7 @@ Same changes as in `@mui/x-date-pickers@6.11.0`.
 ### Tree View / `@mui/x-tree-view@6.0.0-alpha.0`
 
 - [TreeView] Add missing exported types (#9862) @flaviendelangle
-- [TreeView] Add tree view to changelog generator script (#9903) @MBilalShafi
+- [TreeView] Add Tree View to changelog generator script (#9903) @MBilalShafi
 - [TreeView] Create the package on the X repository (#9798) @flaviendelangle
 - [TreeView] Improve props typing (#9855) @flaviendelangle
 

docs/data/common-concepts/custom-components/custom-components.md

@@ -11,7 +11,7 @@ This is the role of all the `baseXXX` component on the Data Grid component (`bas
 These slots receive props that should be as generic as possible so that it is easy to interface any other design system.
 
 Other slots allow you to override parts of the MUI X UI components with a custom UI built specifically for this component.
-This is the role of slots like `calendarHeader` on the `DateCalendar` component or `item` on the `RichTreeView` component.
+This is the role of slots like `calendarHeader` on the `DateCalendar` component or `item` on the Rich Tree View component.
 These slots receive props specific to this part of the UI and will most likely not be re-use throughout your application.
 
 ## Basic usage

docs/data/data-grid/localization/data.json

@@ -67,7 +67,7 @@
     "languageTag": "da-DK",
     "importName": "daDK",
     "localeName": "Danish",
-    "missingKeysCount": 5,
+    "missingKeysCount": 0,
     "totalKeysCount": 122,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/daDK.ts"
   },
@@ -139,7 +139,7 @@
     "languageTag": "it-IT",
     "importName": "itIT",
     "localeName": "Italian",
-    "missingKeysCount": 8,
+    "missingKeysCount": 0,
     "totalKeysCount": 122,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/itIT.ts"
   },
@@ -203,7 +203,7 @@
     "languageTag": "pt-BR",
     "importName": "ptBR",
     "localeName": "Portuguese (Brazil)",
-    "missingKeysCount": 4,
+    "missingKeysCount": 0,
     "totalKeysCount": 122,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptBR.ts"
   },

docs/data/data-grid/pagination/PageSizeCustomOptions.js

@@ -17,7 +17,7 @@ export default function PageSizeCustomOptions() {
           ...data.initialState,
           pagination: { paginationModel: { pageSize: 5 } },
         }}
-        pageSizeOptions={[5, 10, 25]}
+        pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
       />
     </div>
   );

docs/data/data-grid/pagination/PageSizeCustomOptions.tsx

@@ -17,7 +17,7 @@ export default function PageSizeCustomOptions() {
           ...data.initialState,
           pagination: { paginationModel: { pageSize: 5 } },
         }}
-        pageSizeOptions={[5, 10, 25]}
+        pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
       />
     </div>
   );

docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview

@@ -4,5 +4,5 @@
     ...data.initialState,
     pagination: { paginationModel: { pageSize: 5 } },
   }}
-  pageSizeOptions={[5, 10, 25]}
+  pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
 />

docs/data/data-grid/pagination/pagination.md

@@ -41,10 +41,10 @@ You should provide an array of items, each item should be one of these types:
   <DataGrid pageSizeOptions={[5, 10, 25]}>
   ```
 
-- **object**, the `value` and `label` keys will be used respectively for the value and label of the option.
+- **object**, the `value` and `label` keys will be used respectively for the value and label of the option. Define `value` as `-1` to display all results.
 
   ```jsx
-  <DataGrid pageSizeOptions={[10, 100, { value: 1000, label: '1,000' }]}>
+  <DataGrid pageSizeOptions={[10, 100, { value: 1000, label: '1,000' }, { value: -1, label: 'All' }]}>
   ```
 
 {{"demo": "PageSizeCustomOptions.js", "bg": "inline"}}

docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md

@@ -8,7 +8,7 @@ productId: x-tree-view
 
 ## Introduction
 
-This is a reference for migrating your site's tree view from `@mui/lab` to `@mui/x-tree-view`.
+This is a reference for migrating your site's Tree View from `@mui/lab` to `@mui/x-tree-view`.
 This migration is about the npm packages used, it **does not** affect the behavior of the components in your application.
 
 [//]: # 'You can find why we are moving in this direction in the [announcement blog post](/blog/lab-tree-view-to-mui-x/).'

docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md

@@ -13,7 +13,7 @@ To read more about the changes from the new major, check out [the blog post abou
 
 ## Start using the new release
 
-In `package.json`, change the version of the tree view package to `^7.0.0`.
+In `package.json`, change the version of the Tree View package to `^7.0.0`.
 
 ```diff
 -"@mui/x-tree-view": "^6.0.0",
@@ -113,7 +113,7 @@ Here is an example of how you can transpile these features on Webpack 4 using th
 
 ### ✅ Rename `nodeId` to `itemId`
 
-The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
+The required `nodeId` prop used by the Tree Item has been renamed to `itemId` for consistency:
 
 ```diff
  <TreeView>
@@ -140,10 +140,10 @@ The same change has been applied to the `ContentComponent` prop:
  }
 ```
 
-### ✅ Use `SimpleTreeView` instead of `TreeView`
+### ✅ Use Simple Tree View instead of Tree View
 
-The `TreeView` component has been deprecated and will be removed in the next major.
-You can start replacing it with the new `SimpleTreeView` component which has exactly the same API:
+The `<TreeView />` component has been deprecated and will be removed in the next major.
+You can start replacing it with the new `<SimpleTreeView />` component which has exactly the same API:
 
 ```diff
 -import { TreeView } from '@mui/x-tree-view';
@@ -193,7 +193,7 @@ If you were using the `treeViewClasses` object, you can replace it with the new
 #### Define `expandIcon`
 
 The icon used to expand the children of an item (rendered when this item is collapsed)
-is now defined as a slot both on the Tree View and the `TreeItem` components.
+is now defined as a slot both on the `<TreeView />` and the `<TreeItem />` 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:
@@ -224,7 +224,7 @@ you need to use the new `expandIcon` slot on this component:
 Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component.
 :::
 
-If you were passing another icon to your `TreeItem` component,
+If you were passing another icon to your `<TreeItem />` component,
 you need to use the new `expandIcon` slot on this component:
 
 ```diff
@@ -241,7 +241,7 @@ you need to use the new `expandIcon` slot on this component:
 #### Define `collapseIcon`
 
 The icon used to collapse the children of an item (rendered when this item is expanded)
-is now defined as a slot both on the Tree View and the `TreeItem` components.
+is now defined as a slot both on the `<TreeView />` and `<TreeItem />` 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:
@@ -272,7 +272,7 @@ you need to use the new `collapseIcon` slot on this component:
 Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component.
 :::
 
-If you were passing another icon to your `TreeItem` component,
+If you were passing another icon to your `<TreeItem />` component,
 you need to use the new `collapseIcon` slot on this component:
 
 ```diff
@@ -306,7 +306,7 @@ by passing the same icon to both the `collapseIcon` and the `expandIcon` slots o
 #### Define `endIcon`
 
 The icon rendered next to an item without children
-is now defined as a slot both on the Tree View and the `TreeItem` components.
+is now defined as a slot both on the `<TreeView />` and `<TreeItem />` components.
 
 If you were passing an icon to your Tree View component,
 you need to use the new `endIcon` slot on this component:
@@ -324,7 +324,7 @@ you need to use the new `endIcon` slot on this component:
 Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component.
 :::
 
-If you were passing an icon to your `TreeItem` component,
+If you were passing an icon to your `<TreeItem />` component,
 you need to use the new `endIcon` slot on this component:
 
 ```diff
@@ -341,9 +341,9 @@ you need to use the new `endIcon` slot on this component:
 #### Define `icon`
 
 The icon rendered next to an item
-is now defined as a slot on the `TreeItem` component.
+is now defined as a slot on the `<TreeItem />` component.
 
-If you were passing an icon to your `TreeItem` component,
+If you were passing an icon to your `<TreeItem />` component,
 you need to use the new `icon` slot on this component:
 
 ```diff
@@ -364,9 +364,9 @@ Note that the `slots` prop expects a React component, not the JSX element return
 ### ✅ Use slots to define the group transition
 
 The component used to animate the item children
-is now defined as a slot on the `TreeItem` component.
+is now defined as a slot on the `<TreeItem />` component.
 
-If you were passing a `TransitionComponent` or `TransitionProps` to your `TreeItem` component,
+If you were passing a `TransitionComponent` or `TransitionProps` to your `<TreeItem />` component,
 you need to use the new `groupTransition` slot on this component:
 
 ```diff
@@ -382,9 +382,9 @@ you need to use the new `groupTransition` slot on this component:
  </SimpleTreeView>
 ```
 
-### Rename the `group` class of the `TreeItem` component
+### Rename the `group` class of the Tree Item component
 
-The `group` class of the `TreeItem` component has been renamed to `groupTransition` to match with its new slot name.
+The `group` class of the `<TreeItem />` component has been renamed to `groupTransition` to match with its new slot name.
 
 ```diff
  const StyledTreeItem = styled(TreeItem)({
@@ -423,7 +423,7 @@ If you were using the `onNodeToggle` prop to react to the expansion or collapse
 you can use the new `onItemExpansionToggle` prop which is called whenever an item is expanded or collapsed with its id and expansion status
 
 ```tsx
-// It is also available on the deprecated `TreeView` component
+// It is also available on the deprecated Tree View component
 <SimpleTreeView
   onItemExpansionToggle={(event, itemId, isExpanded) =>
     console.log(itemId, isExpanded)
@@ -461,7 +461,7 @@ If you were using the `onNodeSelect` prop to react to the selection or deselecti
 you can use the new `onItemSelectionToggle` prop which is called whenever an item is selected or deselected with its id and selection status.
 
 ```tsx
-// It is also available on the deprecated `TreeView` component
+// It is also available on the deprecated `<TreeView />` component
 <SimpleTreeView
   onItemSelectionToggle={(event, itemId, isSelected) =>
     console.log(itemId, isSelected)
@@ -512,7 +512,7 @@ For example, if you were writing a test with `react-testing-library`, here is wh
 ### ✅ Use `useTreeItemState` instead of `useTreeItem`
 
 The `useTreeItem` hook has been renamed `useTreeItemState`.
-This will help create a new headless version of the `TreeItem` component based on a future `useTreeItem` hook.
+This will help create a new headless version of the Tree Item component based on a future `useTreeItem` hook.
 
 ```diff
 -import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem';

docs/data/tree-view/accessibility/accessibility.md

@@ -54,7 +54,7 @@ Type-ahead is supported for single characters. When typing a character, focus mo
 
 ## Selection
 
-The tree view supports both single and multi-selection. To learn more about the selection API, visit the dedicated page for the [Simple Tree View](/x/react-tree-view/simple-tree-view/selection/) or the [Rich Tree View](/x/react-tree-view/rich-tree-view/selection/).
+The Tree View supports both single and multi-selection. To learn more about the selection API, visit the dedicated page for the [Simple Tree View](/x/react-tree-view/simple-tree-view/selection/) or the [Rich Tree View](/x/react-tree-view/rich-tree-view/selection/).
 
 To read more about the distinction between selection and focus, you can refer to the [WAI-ARIA Authoring Practices guide](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_vs_selection).
 

docs/data/tree-view/getting-started/getting-started.md

@@ -72,7 +72,7 @@ Take a look at the [Styled engine guide](/material-ui/integrations/styled-compon
 
 ## Render your first component
 
-To make sure that everything is set up correctly, try rendering a `SimpleTreeView` component:
+To make sure that everything is set up correctly, try rendering a Simple Tree View component:
 
 {{"demo": "FirstComponent.js"}}
 
@@ -82,7 +82,7 @@ To make sure that everything is set up correctly, try rendering a `SimpleTreeVie
 
 The component follows the WAI-ARIA authoring practices.
 
-To have an accessible tree view you must use `aria-labelledby`
+To have an accessible Tree View you must use `aria-labelledby`
 or `aria-label` to reference or provide a label on the TreeView,
 otherwise, screen readers will announce it as "tree", making it hard to understand the context of a specific tree item.
 

docs/data/tree-view/overview/overview.md

@@ -46,15 +46,15 @@ At the moment, the Simple and Rich Tree Views are similar in terms of feature su
 
 The `@mui/x-tree-view` package exposes two different components to define your tree items:
 
-- `TreeItem`
-- `TreeItem2`
+- `<TreeItem />`
+- `<TreeItem2 />`
 
-#### `TreeItem`
+#### Tree Item
 
 This is the long-standing component that is very similar to the one used in previous versions (`@mui/x-tree-view@6` and `@mui/lab`).
 
-When using `SimpleTreeView`,
-you can import it from `@mui/x-tree-view/TreeItem` and use it as a child of the `SimpleTreeView` component:
+When using Simple Tree View,
+you can import it from `@mui/x-tree-view/TreeItem` and use it as a child of the Simple Tree View component:
 
 ```tsx
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
@@ -70,7 +70,7 @@ export default function App() {
 }
 ```
 
-When using `RichTreeView`,
+When using Rich Tree View,
 you don't have to import anything; it's the default component used to render the items:
 
 ```tsx
@@ -81,12 +81,12 @@ export default function App() {
 }
 ```
 
-#### `TreeItem2`
+#### Tree Item 2
 
-This is a new component that provides a more powerful customization API, and will eventually replace `TreeItem`.
+This is a new component that provides a more powerful customization API, and will eventually replace `<TreeItem />`.
 
-When using `SimpleTreeView`,
-you can import it from `@mui/x-tree-view/TreeItem2` and use it as a child of the `SimpleTreeView` component:
+When using Simple Tree View,
+you can import it from `@mui/x-tree-view/TreeItem2` and use it as a child of the Simple Tree View component:
 
 ```tsx
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
@@ -102,8 +102,8 @@ export default function App() {
 }
 ```
 
-When using `RichTreeView`,
-you can import it from `@mui/x-tree-view/TreeItem2` and pass it as a slot of the `RichTreeView` component:
+When using Rich Tree View,
+you can import it from `@mui/x-tree-view/TreeItem2` and pass it as a slot of the Rich Tree View component:
 
 ```tsx
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';

docs/data/tree-view/rich-tree-view/customization/customization.md

@@ -26,7 +26,7 @@ The demo below shows how to add icons using both an existing icon library, such
 
 ### Custom toggle animations
 
-Use the `groupTransition` slot on the `TreeItem` to pass a component that handles your animation.
+Use the `groupTransition` slot on the `<TreeItem />` to pass a component that handles your animation.
 
 The demo below is animated using Material UI's [Collapse](/material-ui/transitions/#collapse) component together with the [react-spring](https://www.react-spring.dev/) library.
 
@@ -55,7 +55,7 @@ The demo below shows how to add an avatar and custom typography elements.
 ### File explorer
 
 :::warning
-This example is built using the new `TreeItem2` component
+This example is built using the new `<TreeItem2 />` component
 which adds several slots to modify the content of the Tree Item or change its behavior.
 
 You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components).

docs/data/tree-view/rich-tree-view/editing/editing.md

@@ -45,8 +45,8 @@ Use the `onItemLabelChange` prop to trigger an action when the label of an item
 
 ## Change the default behavior
 
-By default, blurring the tree item saves the new value if there is one.
-To modify this behavior, use the `slotProps` of the `TreeItem2`.
+By default, blurring the Tree Item saves the new value if there is one.
+To modify this behavior, use the `slotProps` of the `<TreeItem2 />`.
 
 {{"demo": "CustomBehavior.js"}}