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';
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
index 53353c8b702f..883180a608eb 100644
--- a/docs/data/pages.ts
+++ b/docs/data/pages.ts
@@ -110,6 +110,12 @@ const pages: MuiPage[] = [
{ pathname: '/x/react-data-grid/row-grouping', plan: 'premium' },
{ pathname: '/x/react-data-grid/aggregation', plan: 'premium' },
{ pathname: '/x/react-data-grid/pivoting', plan: 'premium', planned: true },
+ {
+ pathname: '/x/react-data-grid/list-view',
+ title: 'List view',
+ plan: 'pro',
+ unstable: true,
+ },
{
pathname: '/x/react-data-grid/server-side-data-group',
title: 'Server-side data',
diff --git a/docs/data/tree-view/accessibility/accessibility.md b/docs/data/tree-view/accessibility/accessibility.md
index b1fc45bfc690..cc9c2306612b 100644
--- a/docs/data/tree-view/accessibility/accessibility.md
+++ b/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).
diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md
index 79dc191bdc92..6acc9e5382c1 100644
--- a/docs/data/tree-view/getting-started/getting-started.md
+++ b/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.
diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md
index 64c374965652..05a98d903ddf 100644
--- a/docs/data/tree-view/overview/overview.md
+++ b/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`
+#### 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 ``.
-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';
diff --git a/docs/data/tree-view/rich-tree-view/customization/customization.md b/docs/data/tree-view/rich-tree-view/customization/customization.md
index adfe395f9c19..bb6aba1d2453 100644
--- a/docs/data/tree-view/rich-tree-view/customization/customization.md
+++ b/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 `` 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 `` 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).
diff --git a/docs/data/tree-view/rich-tree-view/editing/editing.md b/docs/data/tree-view/rich-tree-view/editing/editing.md
index 73e923bb7cff..158a5728e25b 100644
--- a/docs/data/tree-view/rich-tree-view/editing/editing.md
+++ b/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 ``.
{{"demo": "CustomBehavior.js"}}
diff --git a/docs/data/tree-view/rich-tree-view/headless/headless.md b/docs/data/tree-view/rich-tree-view/headless/headless.md
index 8d1c35ea57f0..ece539bc73d5 100644
--- a/docs/data/tree-view/rich-tree-view/headless/headless.md
+++ b/docs/data/tree-view/rich-tree-view/headless/headless.md
@@ -8,7 +8,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
# Rich Tree View - Headless
-Create your custom tree view.
+Create your custom Tree View.
:::warning
The `useTreeView` hook is not public API for now,
@@ -143,7 +143,7 @@ Once `focusedItemId` becomes a model, we could consider removing the notion of s
### Populate the Tree View instance
-The Tree View instance is an object accessible in all the plugins and in the `TreeItem`.
+The Tree View instance is an object accessible in all the plugins and in the Tree Item.
It is the main way a plugin can provide features to the rest of the component.
```ts
@@ -268,7 +268,7 @@ type UseCustomPluginSignature = TreeViewPluginSignature<{
params: UseCustomPluginParams;
// The params specific to your plugins after running `getDefaultizedParams`
defaultizedParams: UseCustomPluginDefaultizedParams;
- // The methods added to the tree view instance by your plugin
+ // The methods added to the Tree View instance by your plugin
instance: UseCustomPluginInstance;
// The events emitted by your plugin
events: UseCustomPluginEvents;
@@ -325,6 +325,6 @@ type UseCustomPluginSignature = TreeViewPluginSignature<{
### Log expanded items
-Interact with the tree view to see the expanded items being logged:
+Interact with the Tree View to see the expanded items being logged:
{{"demo": "LogExpandedItems.js"}}
diff --git a/docs/data/tree-view/rich-tree-view/items/items.md b/docs/data/tree-view/rich-tree-view/items/items.md
index fbf179e3685e..964ee3b266f2 100644
--- a/docs/data/tree-view/rich-tree-view/items/items.md
+++ b/docs/data/tree-view/rich-tree-view/items/items.md
@@ -28,7 +28,7 @@ Each item must have a unique identifier.
This identifier is used internally to identify the item in the various models and to track the item across updates.
-By default, the `RichTreeView` component looks for a property named `id` in the data set to get that identifier:
+By default, the Rich Tree View component looks for a property named `id` in the data set to get that identifier:
```tsx
const ITEMS = [{ id: 'tree-view-community' }];
@@ -36,7 +36,7 @@ const ITEMS = [{ id: 'tree-view-community' }];
;
```
-If the item's identifier is not called `id`, then you need to use the `getItemId` prop to tell the `RichTreeView` component where it is located.
+If the item's identifier is not called `id`, then you need to use the `getItemId` prop to tell the Rich Tree View component where it is located.
The following demo shows how to use `getItemId` to grab the unique identifier from a property named `internalId`:
@@ -63,7 +63,7 @@ It could be achieved by either defining the prop outside the component scope or
Each item must have a label which does not need to be unique.
-By default, the `RichTreeView` component looks for a property named `label` in the data set to get that label:
+By default, the Rich Tree View component looks for a property named `label` in the data set to get that label:
```tsx
const ITEMS = [{ label: '@mui/x-tree-view' }];
@@ -71,7 +71,7 @@ const ITEMS = [{ label: '@mui/x-tree-view' }];
;
```
-If the item's label is not called `label`, then you need to use the `getItemLabel` prop to tell the `RichTreeView` component where it's located:
+If the item's label is not called `label`, then you need to use the `getItemLabel` prop to tell the Rich Tree View component where it's located:
The following demo shows how to use `getItemLabel` to grab the unique identifier from a property named `name`:
@@ -95,7 +95,7 @@ It could be achieved by either defining the prop outside the component scope or
:::
:::warning
-Unlike the `SimpleTreeView` component, the `RichTreeView` component only supports string labels, you cannot pass React nodes to it.
+Unlike the Simple Tree View component, the Rich Tree View component only supports string labels, you cannot pass React nodes to it.
:::
## Disabled items
diff --git a/docs/data/tree-view/rich-tree-view/ordering/ordering.md b/docs/data/tree-view/rich-tree-view/ordering/ordering.md
index ed28ace0806b..891f3588e634 100644
--- a/docs/data/tree-view/rich-tree-view/ordering/ordering.md
+++ b/docs/data/tree-view/rich-tree-view/ordering/ordering.md
@@ -50,7 +50,7 @@ You can use the `onItemPositionChange` to send the new position of an item to yo
{{"demo": "OnItemPositionChange.js"}}
If you want to send the entire dataset to your backend, you can use the [`getItemTree`](/x/react-tree-view/rich-tree-view/items/#get-the-current-item-tree) API method.
-The following demo demonstrates it by synchronizing the first tree view with the second one whenever you do a re-ordering:
+The following demo demonstrates it by synchronizing the first Tree View with the second one whenever you do a re-ordering:
{{"demo": "SendAllItemsToServer.js"}}
diff --git a/docs/data/tree-view/simple-tree-view/customization/customization.md b/docs/data/tree-view/simple-tree-view/customization/customization.md
index 4a18e36b438b..26da29b34139 100644
--- a/docs/data/tree-view/simple-tree-view/customization/customization.md
+++ b/docs/data/tree-view/simple-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 Tree Item 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.
@@ -62,7 +62,7 @@ Target the `treeItemClasses.groupTransition` class to add connection borders bet
### Gmail clone
:::warning
-This example is built using the new `TreeItem2` component
+This example is built using the new `` 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).
diff --git a/docs/data/tree-view/tree-item-customization/tree-item-customization.md b/docs/data/tree-view/tree-item-customization/tree-item-customization.md
index 93c39d69cd27..6864d0d2b477 100644
--- a/docs/data/tree-view/tree-item-customization/tree-item-customization.md
+++ b/docs/data/tree-view/tree-item-customization/tree-item-customization.md
@@ -81,7 +81,7 @@ By default, a nested item is indented by `12px` from its parent item.
{{"demo": "ItemChildrenIndentationProp.js"}}
:::success
-This feature is compatible with both the `TreeItem` and `TreeItem2` components
+This feature is compatible with both the `` and `` components
If you are using a custom Tree Item component, and you want to override the padding,
then apply the following padding to your `groupTransition` element:
@@ -116,7 +116,7 @@ It will become the default behavior in the next major version of the Tree View c
{{"demo": "IndentationAtItemLevel.js"}}
:::success
-This feature is compatible with both the `TreeItem` and `TreeItem2` components and with the `itemChildrenIndentation` prop.
+This feature is compatible with both the `` and `` components and with the `itemChildrenIndentation` prop.
If you are using a custom Tree Item component, and you want to override the padding,
then apply the following padding to your `content` element:
diff --git a/docs/package.json b/docs/package.json
index f1559e60742d..cfe7ab58704a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -27,7 +27,7 @@
"@emotion/react": "^11.13.3",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.13.0",
- "@mui/docs": "6.1.2",
+ "@mui/docs": "6.1.4",
"@mui/icons-material": "^5.16.7",
"@mui/joy": "^5.0.0-beta.48",
"@mui/lab": "^5.0.0-alpha.173",
@@ -102,7 +102,7 @@
"@babel/plugin-transform-react-constant-elements": "^7.25.7",
"@babel/preset-typescript": "^7.25.7",
"@mui/internal-docs-utils": "^1.0.14",
- "@mui/internal-scripts": "^1.0.22",
+ "@mui/internal-scripts": "^1.0.24",
"@types/chance": "^1.1.6",
"@types/d3-scale": "^4.0.8",
"@types/d3-scale-chromatic": "^3.0.3",
diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
index b9c22994df5f..478f8854a196 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.json
+++ b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -649,6 +649,13 @@
},
"throttleRowsMs": { "type": { "name": "number" }, "default": "0" },
"treeData": { "type": { "name": "bool" }, "default": "false" },
+ "unstable_listColumn": {
+ "type": {
+ "name": "shape",
+ "description": "{ align?: 'center'
| 'left'
| 'right', cellClassName?: func
| string, display?: 'flex'
| 'text', field: string, renderCell?: func }"
+ }
+ },
+ "unstable_listView": { "type": { "name": "bool" } },
"unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" }
},
"name": "DataGridPremium",
diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
index f0e2cc6f48c4..54a8ab54294e 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.json
+++ b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -580,6 +580,13 @@
},
"throttleRowsMs": { "type": { "name": "number" }, "default": "0" },
"treeData": { "type": { "name": "bool" }, "default": "false" },
+ "unstable_listColumn": {
+ "type": {
+ "name": "shape",
+ "description": "{ align?: 'center'
| 'left'
| 'right', cellClassName?: func
| string, display?: 'flex'
| 'text', field: string, renderCell?: func }"
+ }
+ },
+ "unstable_listView": { "type": { "name": "bool" } },
"unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" }
},
"name": "DataGridPro",
diff --git a/docs/pages/x/api/tree-view/rich-tree-view-pro.json b/docs/pages/x/api/tree-view/rich-tree-view-pro.json
index 7cd100636eb8..fb4b208b9f1d 100644
--- a/docs/pages/x/api/tree-view/rich-tree-view-pro.json
+++ b/docs/pages/x/api/tree-view/rich-tree-view-pro.json
@@ -178,7 +178,7 @@
},
{
"name": "endIcon",
- "description": "The default icon displayed next to an end item.\nThis is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.",
+ "description": "The default icon displayed next to an end item.\nThis is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.",
"class": null
}
],
diff --git a/docs/pages/x/api/tree-view/rich-tree-view.json b/docs/pages/x/api/tree-view/rich-tree-view.json
index 53335f98fc5e..98191cec2fc0 100644
--- a/docs/pages/x/api/tree-view/rich-tree-view.json
+++ b/docs/pages/x/api/tree-view/rich-tree-view.json
@@ -153,7 +153,7 @@
},
{
"name": "endIcon",
- "description": "The default icon displayed next to an end item.\nThis is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.",
+ "description": "The default icon displayed next to an end item.\nThis is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.",
"class": null
}
],
diff --git a/docs/pages/x/api/tree-view/simple-tree-view.json b/docs/pages/x/api/tree-view/simple-tree-view.json
index 0e9d838a7327..b3507fdce74d 100644
--- a/docs/pages/x/api/tree-view/simple-tree-view.json
+++ b/docs/pages/x/api/tree-view/simple-tree-view.json
@@ -108,7 +108,7 @@
},
{
"name": "endIcon",
- "description": "The default icon displayed next to an end item.\nThis is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.",
+ "description": "The default icon displayed next to an end item.\nThis is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.",
"class": null
}
],
diff --git a/docs/pages/x/api/tree-view/tree-item-2.json b/docs/pages/x/api/tree-view/tree-item-2.json
index 547383a665af..2b9cb932216b 100644
--- a/docs/pages/x/api/tree-view/tree-item-2.json
+++ b/docs/pages/x/api/tree-view/tree-item-2.json
@@ -67,7 +67,7 @@
},
{
"name": "dragAndDropOverlay",
- "description": "The component that renders the overlay when an item reordering is ongoing.\nWarning: This slot is only useful when using the `RichTreeViewPro` component.",
+ "description": "The component that renders the overlay when an item reordering is ongoing.\nWarning: This slot is only useful when using the `` component.",
"default": "TreeItem2DragAndDropOverlay",
"class": "MuiTreeItem2-dragAndDropOverlay"
},
@@ -76,7 +76,7 @@
{ "name": "endIcon", "description": "The icon displayed next to an end item.", "class": null },
{
"name": "icon",
- "description": "The icon to display next to the tree item's label.",
+ "description": "The icon to display next to the Tree Item's label.",
"class": null
}
],
diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json
index 33853fb02fb1..1d0f0081cc6a 100644
--- a/docs/pages/x/api/tree-view/tree-item.json
+++ b/docs/pages/x/api/tree-view/tree-item.json
@@ -7,12 +7,12 @@
"type": { "name": "custom", "description": "element type" },
"default": "TreeItemContent",
"deprecated": true,
- "deprecationInfo": "Consider using the TreeItem2 component or the useTreeItem2 hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/."
+ "deprecationInfo": "Consider using the <TreeItem2 /> component or the useTreeItem2 hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/."
},
"ContentProps": {
"type": { "name": "object" },
"deprecated": true,
- "deprecationInfo": "Consider using the TreeItem2 component or the useTreeItem2 hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/."
+ "deprecationInfo": "Consider using the <TreeItem2 /> component or the useTreeItem2 hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/."
},
"disabled": { "type": { "name": "bool" }, "default": "false" },
"label": { "type": { "name": "node" } },
@@ -44,7 +44,7 @@
{ "name": "endIcon", "description": "The icon displayed next to an end item.", "class": null },
{
"name": "icon",
- "description": "The icon to display next to the tree item's label.",
+ "description": "The icon to display next to the Tree Item's label.",
"class": null
},
{
@@ -106,7 +106,7 @@
{
"key": "iconContainer",
"className": "MuiTreeItem-iconContainer",
- "description": "Styles applied to the tree item icon.",
+ "description": "Styles applied to the Tree Item icon.",
"isGlobal": false
},
{
diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json
index c03fa0e611a9..dc8fc5e8013f 100644
--- a/docs/pages/x/api/tree-view/tree-view.json
+++ b/docs/pages/x/api/tree-view/tree-view.json
@@ -108,7 +108,7 @@
},
{
"name": "endIcon",
- "description": "The default icon displayed next to an end item.\nThis is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.",
+ "description": "The default icon displayed next to an end item.\nThis is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.",
"class": null
}
],
diff --git a/docs/pages/x/react-data-grid/list-view.js b/docs/pages/x/react-data-grid/list-view.js
new file mode 100644
index 000000000000..cb417266ff2e
--- /dev/null
+++ b/docs/pages/x/react-data-grid/list-view.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/data-grid/list-view/list-view.md?muiMarkdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/src/modules/components/TreeItem2Anatomy.js b/docs/src/modules/components/TreeItem2Anatomy.js
index 2f46bb4dce94..0dded349e5b0 100644
--- a/docs/src/modules/components/TreeItem2Anatomy.js
+++ b/docs/src/modules/components/TreeItem2Anatomy.js
@@ -15,7 +15,7 @@ export default function TreeItem2Anatomy() {
);
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
index 78865102281c..5e463ec7b112 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -661,6 +661,12 @@
"treeData": {
"description": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop."
},
+ "unstable_listColumn": {
+ "description": "Definition of the column rendered when the unstable_listView prop is enabled."
+ },
+ "unstable_listView": {
+ "description": "If true, displays the data in a list view. Use in combination with unstable_listColumn."
+ },
"unstable_rowSpanning": {
"description": "If true, the Data Grid will auto span the cells over the rows having the same value."
}
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
index a0509f2e4549..b2b762362095 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -599,6 +599,12 @@
"treeData": {
"description": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop."
},
+ "unstable_listColumn": {
+ "description": "Definition of the column rendered when the unstable_listView prop is enabled."
+ },
+ "unstable_listView": {
+ "description": "If true, displays the data in a list view. Use in combination with unstable_listColumn."
+ },
"unstable_rowSpanning": {
"description": "If true, the Data Grid will auto span the cells over the rows having the same value."
}
diff --git a/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json b/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json
index 3a33b96c08bd..d7edf9c18d6d 100644
--- a/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json
+++ b/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json
@@ -15,7 +15,7 @@
}
},
"checkboxSelection": {
- "description": "If true, the tree view renders a checkbox at the left of its label that allows selecting it."
+ "description": "If true, the Tree View renders a checkbox at the left of its label that allows selecting it."
},
"classes": { "description": "Override or extend the styles applied to the component." },
"defaultExpandedItems": {
@@ -75,21 +75,21 @@
"description": "If true, ctrl and shift will trigger multiselect."
},
"onExpandedItemsChange": {
- "description": "Callback fired when tree items are expanded/collapsed.",
+ "description": "Callback fired when Tree Items are expanded/collapsed.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemIds": "The ids of the expanded items."
}
},
"onItemClick": {
- "description": "Callback fired when the content slot of a given tree item is clicked.",
+ "description": "Callback fired when the content slot of a given Tree Item is clicked.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The id of the focused item."
}
},
"onItemExpansionToggle": {
- "description": "Callback fired when a tree item is expanded or collapsed.",
+ "description": "Callback fired when a Tree Item is expanded or collapsed.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The itemId of the modified item.",
@@ -97,7 +97,7 @@
}
},
"onItemFocus": {
- "description": "Callback fired when a given tree item is focused.",
+ "description": "Callback fired when a given Tree Item is focused.",
"typeDescriptions": {
"event": "The DOM event that triggered the change. Warning: This is a generic event not a focus event.",
"itemId": "The id of the focused item."
@@ -111,7 +111,7 @@
}
},
"onItemPositionChange": {
- "description": "Callback fired when a tree item is moved in the tree.",
+ "description": "Callback fired when a Tree Item is moved in the tree.",
"typeDescriptions": {
"params": "The params describing the item re-ordering.",
"params.itemId": "The id of the item moved.",
@@ -120,7 +120,7 @@
}
},
"onItemSelectionToggle": {
- "description": "Callback fired when a tree item is selected or deselected.",
+ "description": "Callback fired when a Tree Item is selected or deselected.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The itemId of the modified item.",
@@ -128,7 +128,7 @@
}
},
"onSelectedItemsChange": {
- "description": "Callback fired when tree items are selected/deselected.",
+ "description": "Callback fired when Tree Items are selected/deselected.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemIds": "The ids of the selected items. When multiSelect is true, this is an array of strings; when false (default) a string."
@@ -146,7 +146,7 @@
"classDescriptions": {},
"slotDescriptions": {
"collapseIcon": "The default icon used to collapse the item.",
- "endIcon": "The default icon displayed next to an end item. This is applied to all tree items and can be overridden by the TreeItem icon slot prop.",
+ "endIcon": "The default icon displayed next to an end item. This is applied to all Tree Items and can be overridden by the TreeItem icon slot prop.",
"expandIcon": "The default icon used to expand the item.",
"item": "Custom component for the item.",
"root": "Element rendered at the root."
diff --git a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
index 3ba5993e5187..feba556e087c 100644
--- a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
+++ b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
@@ -5,7 +5,7 @@
"description": "The ref object that allows Tree View manipulation. Can be instantiated with useTreeViewApiRef()."
},
"checkboxSelection": {
- "description": "If true, the tree view renders a checkbox at the left of its label that allows selecting it."
+ "description": "If true, the Tree View renders a checkbox at the left of its label that allows selecting it."
},
"classes": { "description": "Override or extend the styles applied to the component." },
"defaultExpandedItems": {
@@ -55,21 +55,21 @@
"description": "If true, ctrl and shift will trigger multiselect."
},
"onExpandedItemsChange": {
- "description": "Callback fired when tree items are expanded/collapsed.",
+ "description": "Callback fired when Tree Items are expanded/collapsed.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemIds": "The ids of the expanded items."
}
},
"onItemClick": {
- "description": "Callback fired when the content slot of a given tree item is clicked.",
+ "description": "Callback fired when the content slot of a given Tree Item is clicked.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The id of the focused item."
}
},
"onItemExpansionToggle": {
- "description": "Callback fired when a tree item is expanded or collapsed.",
+ "description": "Callback fired when a Tree Item is expanded or collapsed.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The itemId of the modified item.",
@@ -77,7 +77,7 @@
}
},
"onItemFocus": {
- "description": "Callback fired when a given tree item is focused.",
+ "description": "Callback fired when a given Tree Item is focused.",
"typeDescriptions": {
"event": "The DOM event that triggered the change. Warning: This is a generic event not a focus event.",
"itemId": "The id of the focused item."
@@ -91,7 +91,7 @@
}
},
"onItemSelectionToggle": {
- "description": "Callback fired when a tree item is selected or deselected.",
+ "description": "Callback fired when a Tree Item is selected or deselected.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The itemId of the modified item.",
@@ -99,7 +99,7 @@
}
},
"onSelectedItemsChange": {
- "description": "Callback fired when tree items are selected/deselected.",
+ "description": "Callback fired when Tree Items are selected/deselected.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemIds": "The ids of the selected items. When multiSelect is true, this is an array of strings; when false (default) a string."
@@ -117,7 +117,7 @@
"classDescriptions": {},
"slotDescriptions": {
"collapseIcon": "The default icon used to collapse the item.",
- "endIcon": "The default icon displayed next to an end item. This is applied to all tree items and can be overridden by the TreeItem icon slot prop.",
+ "endIcon": "The default icon displayed next to an end item. This is applied to all Tree Items and can be overridden by the TreeItem icon slot prop.",
"expandIcon": "The default icon used to expand the item.",
"item": "Custom component for the item.",
"root": "Element rendered at the root."
diff --git a/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json b/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json
index a56fd8d2d75a..1d9142ee23a9 100644
--- a/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json
+++ b/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json
@@ -5,7 +5,7 @@
"description": "The ref object that allows Tree View manipulation. Can be instantiated with useTreeViewApiRef()."
},
"checkboxSelection": {
- "description": "If true, the tree view renders a checkbox at the left of its label that allows selecting it."
+ "description": "If true, the Tree View renders a checkbox at the left of its label that allows selecting it."
},
"children": { "description": "The content of the component." },
"classes": { "description": "Override or extend the styles applied to the component." },
@@ -38,21 +38,21 @@
"description": "If true, ctrl and shift will trigger multiselect."
},
"onExpandedItemsChange": {
- "description": "Callback fired when tree items are expanded/collapsed.",
+ "description": "Callback fired when Tree Items are expanded/collapsed.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemIds": "The ids of the expanded items."
}
},
"onItemClick": {
- "description": "Callback fired when the content slot of a given tree item is clicked.",
+ "description": "Callback fired when the content slot of a given Tree Item is clicked.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The id of the focused item."
}
},
"onItemExpansionToggle": {
- "description": "Callback fired when a tree item is expanded or collapsed.",
+ "description": "Callback fired when a Tree Item is expanded or collapsed.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The itemId of the modified item.",
@@ -60,14 +60,14 @@
}
},
"onItemFocus": {
- "description": "Callback fired when a given tree item is focused.",
+ "description": "Callback fired when a given Tree Item is focused.",
"typeDescriptions": {
"event": "The DOM event that triggered the change. Warning: This is a generic event not a focus event.",
"itemId": "The id of the focused item."
}
},
"onItemSelectionToggle": {
- "description": "Callback fired when a tree item is selected or deselected.",
+ "description": "Callback fired when a Tree Item is selected or deselected.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The itemId of the modified item.",
@@ -75,7 +75,7 @@
}
},
"onSelectedItemsChange": {
- "description": "Callback fired when tree items are selected/deselected.",
+ "description": "Callback fired when Tree Items are selected/deselected.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemIds": "The ids of the selected items. When multiSelect is true, this is an array of strings; when false (default) a string."
@@ -93,7 +93,7 @@
"classDescriptions": {},
"slotDescriptions": {
"collapseIcon": "The default icon used to collapse the item.",
- "endIcon": "The default icon displayed next to an end item. This is applied to all tree items and can be overridden by the TreeItem icon slot prop.",
+ "endIcon": "The default icon displayed next to an end item. This is applied to all Tree Items and can be overridden by the TreeItem icon slot prop.",
"expandIcon": "The default icon used to expand the item.",
"root": "Element rendered at the root."
}
diff --git a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json
index 1ec2e89e98d8..5177a55030aa 100644
--- a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json
+++ b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json
@@ -52,11 +52,11 @@
"checkbox": "The component that renders the item checkbox for selection.",
"collapseIcon": "The icon used to collapse the item.",
"content": "The component that renders the content of the item. (e.g.: everything related to this item, not to its children).",
- "dragAndDropOverlay": "The component that renders the overlay when an item reordering is ongoing. Warning: This slot is only useful when using the RichTreeViewPro component.",
+ "dragAndDropOverlay": "The component that renders the overlay when an item reordering is ongoing. Warning: This slot is only useful when using the <RichTreeViewPro /> component.",
"endIcon": "The icon displayed next to an end item.",
"expandIcon": "The icon used to expand the item.",
"groupTransition": "The component that renders the children of the item.",
- "icon": "The icon to display next to the tree item's label.",
+ "icon": "The icon to display next to the Tree Item's label.",
"iconContainer": "The component that renders the icon.",
"label": "The component that renders the item label.",
"labelInput": "The component that renders the input to edit the label when the item is editable and is currently being edited.",
diff --git a/docs/translations/api-docs/tree-view/tree-item/tree-item.json b/docs/translations/api-docs/tree-view/tree-item/tree-item.json
index f0febee14167..19addf4e001f 100644
--- a/docs/translations/api-docs/tree-view/tree-item/tree-item.json
+++ b/docs/translations/api-docs/tree-view/tree-item/tree-item.json
@@ -10,7 +10,7 @@
"ContentProps": { "description": "Props applied to ContentComponent." },
"disabled": { "description": "If true, the item is disabled." },
"itemId": { "description": "The id of the item." },
- "label": { "description": "The tree item label." },
+ "label": { "description": "The Tree Item label." },
"onFocus": {
"description": "This prop isn't supported. Use the onItemFocus callback on the tree if you need to monitor a item's focus."
},
@@ -62,7 +62,7 @@
},
"iconContainer": {
"description": "Styles applied to {{nodeName}}.",
- "nodeName": "the tree item icon"
+ "nodeName": "the Tree Item icon"
},
"label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label element" },
"labelInput": {
@@ -82,6 +82,6 @@
"endIcon": "The icon displayed next to an end item.",
"expandIcon": "The icon used to expand the item.",
"groupTransition": "The component that animates the appearance / disappearance of the item's children.",
- "icon": "The icon to display next to the tree item's label."
+ "icon": "The icon to display next to the Tree Item's label."
}
}
diff --git a/docs/translations/api-docs/tree-view/tree-view/tree-view.json b/docs/translations/api-docs/tree-view/tree-view/tree-view.json
index 765c53c0efd9..069ba6b9dbc6 100644
--- a/docs/translations/api-docs/tree-view/tree-view/tree-view.json
+++ b/docs/translations/api-docs/tree-view/tree-view/tree-view.json
@@ -1,11 +1,11 @@
{
- "componentDescription": "This component has been deprecated in favor of the new `SimpleTreeView` component.\nYou can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)",
+ "componentDescription": "This component has been deprecated in favor of the new Simple Tree View component.\nYou can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)",
"propDescriptions": {
"apiRef": {
"description": "The ref object that allows Tree View manipulation. Can be instantiated with useTreeViewApiRef()."
},
"checkboxSelection": {
- "description": "If true, the tree view renders a checkbox at the left of its label that allows selecting it."
+ "description": "If true, the Tree View renders a checkbox at the left of its label that allows selecting it."
},
"children": { "description": "The content of the component." },
"classes": { "description": "Override or extend the styles applied to the component." },
@@ -38,21 +38,21 @@
"description": "If true, ctrl and shift will trigger multiselect."
},
"onExpandedItemsChange": {
- "description": "Callback fired when tree items are expanded/collapsed.",
+ "description": "Callback fired when Tree Items are expanded/collapsed.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemIds": "The ids of the expanded items."
}
},
"onItemClick": {
- "description": "Callback fired when the content slot of a given tree item is clicked.",
+ "description": "Callback fired when the content slot of a given Tree Item is clicked.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The id of the focused item."
}
},
"onItemExpansionToggle": {
- "description": "Callback fired when a tree item is expanded or collapsed.",
+ "description": "Callback fired when a Tree Item is expanded or collapsed.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The itemId of the modified item.",
@@ -60,14 +60,14 @@
}
},
"onItemFocus": {
- "description": "Callback fired when a given tree item is focused.",
+ "description": "Callback fired when a given Tree Item is focused.",
"typeDescriptions": {
"event": "The DOM event that triggered the change. Warning: This is a generic event not a focus event.",
"itemId": "The id of the focused item."
}
},
"onItemSelectionToggle": {
- "description": "Callback fired when a tree item is selected or deselected.",
+ "description": "Callback fired when a Tree Item is selected or deselected.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemId": "The itemId of the modified item.",
@@ -75,7 +75,7 @@
}
},
"onSelectedItemsChange": {
- "description": "Callback fired when tree items are selected/deselected.",
+ "description": "Callback fired when Tree Items are selected/deselected.",
"typeDescriptions": {
"event": "The DOM event that triggered the change.",
"itemIds": "The ids of the selected items. When multiSelect is true, this is an array of strings; when false (default) a string."
@@ -93,7 +93,7 @@
"classDescriptions": {},
"slotDescriptions": {
"collapseIcon": "The default icon used to collapse the item.",
- "endIcon": "The default icon displayed next to an end item. This is applied to all tree items and can be overridden by the TreeItem icon slot prop.",
+ "endIcon": "The default icon displayed next to an end item. This is applied to all Tree Items and can be overridden by the TreeItem icon slot prop.",
"expandIcon": "The default icon used to expand the item.",
"root": "Element rendered at the root."
}
diff --git a/package.json b/package.json
index 02e54753d4f5..d154be195aa8 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "version": "7.20.0",
+ "version": "7.21.0",
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm",
@@ -92,8 +92,8 @@
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^5.16.7",
"@mui/internal-babel-plugin-resolve-imports": "1.0.18",
- "@mui/internal-markdown": "^1.0.15",
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-markdown": "^1.0.17",
+ "@mui/internal-test-utils": "^1.0.17",
"@mui/material": "^5.16.7",
"@mui/monorepo": "github:mui/material-ui#010de4505361345951824d905d1508d6f258ba67",
"@mui/utils": "^5.16.6",
diff --git a/packages/x-charts-pro/package.json b/packages/x-charts-pro/package.json
index 946258e4fc7c..628ad50ae463 100644
--- a/packages/x-charts-pro/package.json
+++ b/packages/x-charts-pro/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-charts-pro",
- "version": "7.0.0-beta.4",
+ "version": "7.0.0-beta.5",
"description": "The Pro plan edition of the Charts components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
index 0c3af2884f47..887cd1058746 100644
--- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
+++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
@@ -24,6 +24,46 @@ function BarChartPlotZoom(props: BarPlotProps) {
return ;
}
+BarChartPlotZoom.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ /**
+ * If provided, the function will be used to format the label of the bar.
+ * It can be set to 'value' to display the current value.
+ * @param {BarItem} item The item to format.
+ * @param {BarLabelContext} context data about the bar.
+ * @returns {string} The formatted label.
+ */
+ barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
+ /**
+ * Defines the border radius of the bar element.
+ */
+ borderRadius: PropTypes.number,
+ /**
+ * Callback fired when a bar item is clicked.
+ * @param {React.MouseEvent} event The event source of the callback.
+ * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
+ */
+ onItemClick: PropTypes.func,
+ /**
+ * If `true`, animations are skipped.
+ * @default undefined
+ */
+ skipAnimation: PropTypes.bool,
+ /**
+ * The props used for each component slot.
+ * @default {}
+ */
+ slotProps: PropTypes.object,
+ /**
+ * Overridable component slots.
+ * @default {}
+ */
+ slots: PropTypes.object,
+} as any;
+
export interface BarChartProProps extends BarChartProps, ZoomProps {}
/**
diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
index 732756fe1731..b7d66add50ba 100644
--- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
+++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
@@ -31,16 +31,106 @@ function AreaPlotZoom(props: AreaPlotProps) {
return ;
}
+AreaPlotZoom.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ /**
+ * Callback fired when a line area item is clicked.
+ * @param {React.MouseEvent} event The event source of the callback.
+ * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+ */
+ onItemClick: PropTypes.func,
+ /**
+ * If `true`, animations are skipped.
+ * @default false
+ */
+ skipAnimation: PropTypes.bool,
+ /**
+ * The props used for each component slot.
+ * @default {}
+ */
+ slotProps: PropTypes.object,
+ /**
+ * Overridable component slots.
+ * @default {}
+ */
+ slots: PropTypes.object,
+} as any;
+
function LinePlotZoom(props: LinePlotProps) {
const { isInteracting } = useZoom();
return ;
}
+LinePlotZoom.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ /**
+ * Callback fired when a line item is clicked.
+ * @param {React.MouseEvent} event The event source of the callback.
+ * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+ */
+ onItemClick: PropTypes.func,
+ /**
+ * If `true`, animations are skipped.
+ * @default false
+ */
+ skipAnimation: PropTypes.bool,
+ /**
+ * The props used for each component slot.
+ * @default {}
+ */
+ slotProps: PropTypes.object,
+ /**
+ * Overridable component slots.
+ * @default {}
+ */
+ slots: PropTypes.object,
+} as any;
+
function MarkPlotZoom(props: MarkPlotProps) {
const { isInteracting } = useZoom();
return ;
}
+MarkPlotZoom.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ /**
+ * If `true` the mark element will only be able to render circle.
+ * Giving fewer customization options, but saving around 40ms per 1.000 marks.
+ * @default false
+ */
+ experimentalRendering: PropTypes.bool,
+ /**
+ * Callback fired when a line mark item is clicked.
+ * @param {React.MouseEvent} event The event source of the callback.
+ * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+ */
+ onItemClick: PropTypes.func,
+ /**
+ * If `true`, animations are skipped.
+ * @default false
+ */
+ skipAnimation: PropTypes.bool,
+ /**
+ * The props used for each component slot.
+ * @default {}
+ */
+ slotProps: PropTypes.object,
+ /**
+ * Overridable component slots.
+ * @default {}
+ */
+ slots: PropTypes.object,
+} as any;
+
export interface LineChartProProps extends LineChartProps, ZoomProps {}
/**
diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json
index 65038b813fb0..02d47aedb6be 100644
--- a/packages/x-charts/package.json
+++ b/packages/x-charts/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-charts",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "The community edition of the Charts components (MUI X).",
"author": "MUI Team",
"main": "src/index.js",
@@ -65,7 +65,7 @@
}
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-test-utils": "^1.0.17",
"@mui/material": "^5.16.7",
"@mui/system": "^5.16.7",
"@react-spring/core": "^9.7.5",
diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md
index 453f783b567d..32eb12c7aa55 100644
--- a/packages/x-codemod/README.md
+++ b/packages/x-codemod/README.md
@@ -227,9 +227,9 @@ npx @mui/x-codemod@latest v7.0.0/data-grid/remove-stabilized-experimentalFeature
### Tree View codemods
-#### `preset-safe` for tree view v7.0.0
+#### `preset-safe` for Tree View v7.0.0
-The `preset-safe` codemods for tree view.
+The `preset-safe` codemods for Tree View.
```bash
npx @mui/x-codemod@latest v7.0.0/tree-view/preset-safe
@@ -247,7 +247,7 @@ The list includes these transformers
#### `rename-tree-view-simple-tree-view`
-Renames the `TreeView` component to `SimpleTreeView`
+Renames the Tree View component to Simple Tree View
```diff
-import { TreeView } from '@mui/x-tree-view';
diff --git a/packages/x-codemod/package.json b/packages/x-codemod/package.json
index 4f9a0b5687a4..c9a7f1934e1d 100644
--- a/packages/x-codemod/package.json
+++ b/packages/x-codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-codemod",
- "version": "7.20.0",
+ "version": "7.21.0",
"bin": "./codemod.js",
"private": false,
"author": "MUI Team",
diff --git a/packages/x-data-grid-generator/package.json b/packages/x-data-grid-generator/package.json
index cf21b769479f..a9b08defc290 100644
--- a/packages/x-data-grid-generator/package.json
+++ b/packages/x-data-grid-generator/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-data-grid-generator",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "Generate fake data for demo purposes only.",
"author": "MUI Team",
"main": "src/index.ts",
diff --git a/packages/x-data-grid-generator/src/columns/employees.columns.tsx b/packages/x-data-grid-generator/src/columns/employees.columns.tsx
index 1f4ea311b299..4f29ce843a4a 100644
--- a/packages/x-data-grid-generator/src/columns/employees.columns.tsx
+++ b/packages/x-data-grid-generator/src/columns/employees.columns.tsx
@@ -170,7 +170,7 @@ export const getEmployeeColumns = (): GridColDefGenerator[] => [
if (!value || typeof value !== 'number') {
return value;
}
- return `${value.toLocaleString()}$`;
+ return `$${value.toLocaleString()}`;
},
},
];
diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json
index 2831040fbfb4..228a3581e84a 100644
--- a/packages/x-data-grid-premium/package.json
+++ b/packages/x-data-grid-premium/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-data-grid-premium",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "The Premium plan edition of the Data Grid Components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
@@ -72,7 +72,7 @@
}
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-test-utils": "^1.0.17",
"@mui/material": "^5.16.7",
"@mui/system": "^5.16.7",
"@types/prop-types": "^15.7.13",
diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
index 86be3303b736..0f05ca94e442 100644
--- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
+++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
@@ -1106,6 +1106,21 @@ DataGridPremiumRaw.propTypes = {
get: PropTypes.func.isRequired,
set: PropTypes.func.isRequired,
}),
+ /**
+ * Definition of the column rendered when the `unstable_listView` prop is enabled.
+ */
+ unstable_listColumn: PropTypes.shape({
+ align: PropTypes.oneOf(['center', 'left', 'right']),
+ cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ display: PropTypes.oneOf(['flex', 'text']),
+ field: PropTypes.string.isRequired,
+ renderCell: PropTypes.func,
+ }),
+ /**
+ * If `true`, displays the data in a list view.
+ * Use in combination with `unstable_listColumn`.
+ */
+ unstable_listView: PropTypes.bool,
unstable_onDataSourceError: PropTypes.func,
/**
* If `true`, the Data Grid will auto span the cells over the rows having the same value.
diff --git a/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx
index 12899dd06ce2..8106dec99163 100644
--- a/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx
+++ b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx
@@ -70,6 +70,8 @@ import {
dataSourceStateInitializer,
useGridRowSpanning,
rowSpanningStateInitializer,
+ useGridListView,
+ listViewStateInitializer,
} from '@mui/x-data-grid-pro/internals';
import { GridApiPremium, GridPrivateApiPremium } from '../models/gridApiPremium';
import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps';
@@ -143,6 +145,7 @@ export const useDataGridPremiumComponent = (
useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
useGridInitializeState(virtualizationStateInitializer, apiRef, props);
useGridInitializeState(dataSourceStateInitializer, apiRef, props);
+ useGridInitializeState(listViewStateInitializer, apiRef, props);
useGridRowGrouping(apiRef, props);
useGridHeaderFiltering(apiRef, props);
@@ -156,7 +159,7 @@ export const useDataGridPremiumComponent = (
useGridColumns(apiRef, props);
useGridRows(apiRef, props);
useGridRowSpanning(apiRef, props);
- useGridParamsApi(apiRef);
+ useGridParamsApi(apiRef, props);
useGridDetailPanel(apiRef, props);
useGridColumnSpanning(apiRef);
useGridColumnGrouping(apiRef, props);
@@ -185,6 +188,7 @@ export const useDataGridPremiumComponent = (
useGridStatePersistence(apiRef);
useGridDataSource(apiRef, props);
useGridVirtualization(apiRef, props);
+ useGridListView(apiRef, props);
return apiRef;
};
diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json
index b6833d5bf47d..8810d0971ce6 100644
--- a/packages/x-data-grid-pro/package.json
+++ b/packages/x-data-grid-pro/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-data-grid-pro",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "The Pro plan edition of the Data Grid components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
@@ -70,7 +70,7 @@
}
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-test-utils": "^1.0.17",
"@mui/material": "^5.16.7",
"@mui/system": "^5.16.7",
"@types/prop-types": "^15.7.13",
diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
index 8cea3a676d0d..cf10a788ce68 100644
--- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
+++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
@@ -1005,6 +1005,21 @@ DataGridProRaw.propTypes = {
get: PropTypes.func.isRequired,
set: PropTypes.func.isRequired,
}),
+ /**
+ * Definition of the column rendered when the `unstable_listView` prop is enabled.
+ */
+ unstable_listColumn: PropTypes.shape({
+ align: PropTypes.oneOf(['center', 'left', 'right']),
+ cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ display: PropTypes.oneOf(['flex', 'text']),
+ field: PropTypes.string.isRequired,
+ renderCell: PropTypes.func,
+ }),
+ /**
+ * If `true`, displays the data in a list view.
+ * Use in combination with `unstable_listColumn`.
+ */
+ unstable_listView: PropTypes.bool,
unstable_onDataSourceError: PropTypes.func,
/**
* If `true`, the Data Grid will auto span the cells over the rows having the same value.
diff --git a/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx
index 6b8b06fc21bb..0240d83802fc 100644
--- a/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx
+++ b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx
@@ -49,6 +49,8 @@ import {
columnResizeStateInitializer,
useGridRowSpanning,
rowSpanningStateInitializer,
+ useGridListView,
+ listViewStateInitializer,
} from '@mui/x-data-grid/internals';
import { GridApiPro, GridPrivateApiPro } from '../models/gridApiPro';
import { DataGridProProcessedProps } from '../models/dataGridProProps';
@@ -132,6 +134,7 @@ export const useDataGridProComponent = (
useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
useGridInitializeState(virtualizationStateInitializer, apiRef, props);
useGridInitializeState(dataSourceStateInitializer, apiRef, props);
+ useGridInitializeState(listViewStateInitializer, apiRef, props);
useGridHeaderFiltering(apiRef, props);
useGridTreeData(apiRef, props);
@@ -142,7 +145,7 @@ export const useDataGridProComponent = (
useGridColumns(apiRef, props);
useGridRows(apiRef, props);
useGridRowSpanning(apiRef, props);
- useGridParamsApi(apiRef);
+ useGridParamsApi(apiRef, props);
useGridDetailPanel(apiRef, props);
useGridColumnSpanning(apiRef);
useGridColumnGrouping(apiRef, props);
@@ -169,6 +172,7 @@ export const useDataGridProComponent = (
useGridStatePersistence(apiRef);
useGridVirtualization(apiRef, props);
useGridDataSource(apiRef, props);
+ useGridListView(apiRef, props);
return apiRef;
};
diff --git a/packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts
index a54285727759..295702230804 100644
--- a/packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts
+++ b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts
@@ -55,6 +55,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES: DataGridProPropsWithDefaultValu
rowsLoadingMode: 'client',
scrollEndThreshold: 80,
treeData: false,
+ unstable_listView: false,
};
const defaultSlots = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
index 58ba0623f1bd..2c8c8cbce7a9 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -193,7 +193,9 @@ const GridHeaderFilterCell = React.forwardRef;
}
diff --git a/packages/x-data-grid/package.json b/packages/x-data-grid/package.json
index 61dbcb5a3321..1076a0532ca3 100644
--- a/packages/x-data-grid/package.json
+++ b/packages/x-data-grid/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-data-grid",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "The Community plan edition of the Data Grid components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
@@ -71,7 +71,7 @@
}
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-test-utils": "^1.0.17",
"@mui/joy": "^5.0.0-beta.48",
"@mui/material": "^5.16.7",
"@mui/system": "^5.16.7",
diff --git a/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx b/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx
index 85f9a09cb3ea..2c888c05b238 100644
--- a/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx
+++ b/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx
@@ -57,6 +57,10 @@ import {
rowSpanningStateInitializer,
useGridRowSpanning,
} from '../hooks/features/rows/useGridRowSpanning';
+import {
+ listViewStateInitializer,
+ useGridListView,
+} from '../hooks/features/listView/useGridListView';
export const useDataGridComponent = (
inputApiRef: React.MutableRefObject | undefined,
@@ -93,13 +97,14 @@ export const useDataGridComponent = (
useGridInitializeState(columnMenuStateInitializer, apiRef, props);
useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+ useGridInitializeState(listViewStateInitializer, apiRef, props);
useGridKeyboardNavigation(apiRef, props);
useGridRowSelection(apiRef, props);
useGridColumns(apiRef, props);
useGridRows(apiRef, props);
useGridRowSpanning(apiRef, props);
- useGridParamsApi(apiRef);
+ useGridParamsApi(apiRef, props);
useGridColumnSpanning(apiRef);
useGridColumnGrouping(apiRef, props);
useGridEditing(apiRef, props);
@@ -120,6 +125,7 @@ export const useDataGridComponent = (
useGridEvents(apiRef, props);
useGridStatePersistence(apiRef);
useGridVirtualization(apiRef, props);
+ useGridListView(apiRef, props);
return apiRef;
};
diff --git a/packages/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts
index 1ae57fbf5d8f..7a2d045607e5 100644
--- a/packages/x-data-grid/src/DataGrid/useDataGridProps.ts
+++ b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts
@@ -22,6 +22,7 @@ const DATA_GRID_FORCED_PROPS: { [key in DataGridForcedPropsKey]?: DataGridProces
disableColumnReorder: true,
keepColumnPositionIfDraggedOutside: false,
signature: 'DataGrid',
+ unstable_listView: false,
};
const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
diff --git a/packages/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx
index f326364029d1..8358424a82a7 100644
--- a/packages/x-data-grid/src/components/GridRow.tsx
+++ b/packages/x-data-grid/src/components/GridRow.tsx
@@ -81,6 +81,14 @@ function EmptyCell({ width }: { width: number }) {
);
}
+EmptyCell.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ width: PropTypes.number.isRequired,
+} as any;
+
const GridRow = React.forwardRef(function GridRow(props, refProp) {
const {
selected,
@@ -411,12 +419,18 @@ const GridRow = React.forwardRef(function GridRow(
),
);
}
+
for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
const column = visibleColumns[i];
const indexInSection = i - pinnedColumns.left.length;
+ if (!column) {
+ continue;
+ }
+
cells.push(getCell(column, indexInSection, i, middleColumnsLength));
}
+
if (hasVirtualFocusCellRight) {
cells.push(
getCell(
diff --git a/packages/x-data-grid/src/components/base/GridOverlays.tsx b/packages/x-data-grid/src/components/base/GridOverlays.tsx
index e21561bcdf27..79baf162939d 100644
--- a/packages/x-data-grid/src/components/base/GridOverlays.tsx
+++ b/packages/x-data-grid/src/components/base/GridOverlays.tsx
@@ -93,6 +93,15 @@ function GridOverlayWrapper(props: React.PropsWithChildren) {
);
}
+GridOverlayWrapper.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+ overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay']),
+} as any;
+
GridOverlays.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index f66edba975ea..86b93de0962d 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -535,6 +535,7 @@ export const GridRootStyles = styled('div', {
/* Cell styles */
[`& .${c.cell}`]: {
+ flex: '0 0 auto',
height: 'var(--height)',
width: 'var(--width)',
lineHeight: 'calc(var(--height) - 1px)', // -1px for the border
diff --git a/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx
index 3842fe844f93..b5a94ecc60df 100644
--- a/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx
+++ b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx
@@ -42,6 +42,39 @@ const GridGenericColumnMenu = React.forwardRef(
function GridColumnMenu(props, ref) {
return (
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx
index 855233ca9ecc..672e5e32dbe1 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx
@@ -35,7 +35,7 @@ export interface GridToolbarExportProps {
[key: string]: any;
}
-export function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps) {
+function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps) {
const apiRef = useGridApiContext();
const { hideMenu, options, ...other } = props;
@@ -52,7 +52,28 @@ export function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps) {
);
}
-export function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps) {
+GridCsvExportMenuItem.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ hideMenu: PropTypes.func,
+ options: PropTypes.shape({
+ allColumns: PropTypes.bool,
+ delimiter: PropTypes.string,
+ disableToolbarButton: PropTypes.bool,
+ escapeFormulas: PropTypes.bool,
+ fields: PropTypes.arrayOf(PropTypes.string),
+ fileName: PropTypes.string,
+ getRowsToExport: PropTypes.func,
+ includeColumnGroupsHeaders: PropTypes.bool,
+ includeHeaders: PropTypes.bool,
+ shouldAppendQuotes: PropTypes.bool,
+ utf8WithBom: PropTypes.bool,
+ }),
+} as any;
+
+function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps) {
const apiRef = useGridApiContext();
const { hideMenu, options, ...other } = props;
@@ -69,6 +90,42 @@ export function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps) {
);
}
+GridPrintExportMenuItem.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ hideMenu: PropTypes.func,
+ options: PropTypes.shape({
+ allColumns: PropTypes.bool,
+ bodyClassName: PropTypes.string,
+ copyStyles: PropTypes.bool,
+ disableToolbarButton: PropTypes.bool,
+ fields: PropTypes.arrayOf(PropTypes.string),
+ fileName: PropTypes.string,
+ getRowsToExport: PropTypes.func,
+ hideFooter: PropTypes.bool,
+ hideToolbar: PropTypes.bool,
+ includeCheckboxes: PropTypes.bool,
+ pageStyle: PropTypes.oneOfType([
+ PropTypes.shape({
+ '__@hasInstance@646': PropTypes.func.isRequired,
+ '__@metadata@648': PropTypes.any,
+ apply: PropTypes.func.isRequired,
+ arguments: PropTypes.any.isRequired,
+ bind: PropTypes.func.isRequired,
+ call: PropTypes.func.isRequired,
+ caller: PropTypes.object.isRequired,
+ length: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ prototype: PropTypes.any.isRequired,
+ toString: PropTypes.func.isRequired,
+ }),
+ PropTypes.string,
+ ]),
+ }),
+} as any;
+
const GridToolbarExport = React.forwardRef(
function GridToolbarExport(props, ref) {
const { csvOptions = {}, printOptions = {}, excelOptions, ...other } = props;
@@ -107,4 +164,4 @@ GridToolbarExport.propTypes = {
slotProps: PropTypes.object,
} as any;
-export { GridToolbarExport };
+export { GridToolbarExport, GridCsvExportMenuItem, GridPrintExportMenuItem };
diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx
index e5bf5410f4cc..c832d1414553 100644
--- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx
+++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx
@@ -148,6 +148,11 @@ const GridVirtualScrollbar = React.forwardRef
diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
index 109bd7fbb879..16dd85280208 100644
--- a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
+++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
@@ -93,7 +93,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
-
+ {!rootProps.unstable_listView && }
@@ -113,7 +113,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
{dimensions.hasScrollY && }
- {dimensions.hasScrollX && (
+ {dimensions.hasScrollX && !rootProps.unstable_listView && (
)}
{props.children}
diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
index e52267e0916d..3a89a3254b60 100644
--- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
+++ b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -111,7 +111,9 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
React.useEffect(() => {
- apiRef.current.columnHeadersContainerRef!.current!.scrollLeft = 0;
+ if (apiRef.current.columnHeadersContainerRef.current) {
+ apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+ }
}, [apiRef]);
const handleColumnResizeStart = React.useCallback>(
diff --git a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts
index 60a5566ada00..e468f750e98b 100644
--- a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts
+++ b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts
@@ -440,8 +440,15 @@ export function getFirstNonSpannedColumnToRender({
export function getTotalHeaderHeight(
apiRef: React.MutableRefObject,
- props: Pick,
+ props: Pick<
+ DataGridProcessedProps,
+ 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView'
+ >,
) {
+ if (props.unstable_listView) {
+ return 0;
+ }
+
const densityFactor = gridDensityFactorSelector(apiRef);
const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef);
diff --git a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
index 5ad04140d74b..bed67114ffcf 100644
--- a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
+++ b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
@@ -32,6 +32,7 @@ import {
getRightColumnIndex,
findNonRowSpannedCell,
} from './utils';
+import { gridListColumnSelector } from '../listView/gridListViewSelectors';
/**
* @requires useGridSorting (method) - can be after
@@ -52,11 +53,13 @@ export const useGridKeyboardNavigation = (
| 'experimentalFeatures'
| 'signature'
| 'headerFilters'
+ | 'unstable_listView'
>,
): void => {
const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
const isRtl = useRtl();
+ const listView = props.unstable_listView;
const currentPageRows = React.useMemo(
() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows),
@@ -88,7 +91,9 @@ export const useGridKeyboardNavigation = (
colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
}
}
- const field = gridVisibleColumnFieldsSelector(apiRef)[colIndex];
+ const field = listView
+ ? gridListColumnSelector(apiRef.current.state)!.field
+ : gridVisibleColumnFieldsSelector(apiRef)[colIndex];
const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection);
// `scrollToIndexes` requires a rowIndex relative to all visible rows.
// Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
@@ -102,7 +107,7 @@ export const useGridKeyboardNavigation = (
});
apiRef.current.setCellFocus(nonRowSpannedRowId, field);
},
- [apiRef, logger],
+ [apiRef, logger, listView],
);
const goToHeader = React.useCallback(
@@ -499,14 +504,18 @@ export const useGridKeyboardNavigation = (
const viewportPageSize = apiRef.current.getViewportPageSize();
+ const getColumnIndexFn = listView ? () => 0 : apiRef.current.getColumnIndex;
const colIndexBefore = (params as GridCellParams).field
- ? apiRef.current.getColumnIndex((params as GridCellParams).field)
+ ? getColumnIndexFn((params as GridCellParams).field)
: 0;
const rowIndexBefore = currentPageRows.findIndex((row) => row.id === params.id);
const firstRowIndexInPage = 0;
const lastRowIndexInPage = currentPageRows.length - 1;
const firstColIndex = 0;
- const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+ const visibleColumns = listView
+ ? [gridListColumnSelector(apiRef.current.state)]
+ : gridVisibleColumnDefinitionsSelector(apiRef);
+ const lastColIndex = visibleColumns.length - 1;
let shouldPreventDefault = true;
switch (event.key) {
@@ -649,6 +658,7 @@ export const useGridKeyboardNavigation = (
headerFilteringEnabled,
goToHeaderFilter,
goToHeader,
+ listView,
],
);
diff --git a/packages/x-data-grid/src/hooks/features/listView/gridListViewSelectors.ts b/packages/x-data-grid/src/hooks/features/listView/gridListViewSelectors.ts
new file mode 100644
index 000000000000..a5e69fc079bb
--- /dev/null
+++ b/packages/x-data-grid/src/hooks/features/listView/gridListViewSelectors.ts
@@ -0,0 +1,6 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+
+/**
+ * Get a list column definition
+ */
+export const gridListColumnSelector = (state: GridStateCommunity) => state.listViewColumn;
diff --git a/packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx b/packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx
new file mode 100644
index 000000000000..4f552b30eb49
--- /dev/null
+++ b/packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import type { GridListColDef } from '../../../models/colDef/gridColDef';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridEventListener } from '../../../models/events';
+import { gridDimensionsSelector } from '../dimensions';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+
+export type GridListViewState = (GridListColDef & { computedWidth: number }) | undefined;
+
+export const listViewStateInitializer: GridStateInitializer<
+ Pick
+> = (state, props, apiRef) => ({
+ ...state,
+ listViewColumn: { ...props.unstable_listColumn, computedWidth: getListColumnWidth(apiRef) },
+});
+
+export function useGridListView(
+ apiRef: React.MutableRefObject,
+ props: Pick,
+) {
+ /*
+ * EVENTS
+ */
+ const updateListColumnWidth = () => {
+ apiRef.current.setState((state) => {
+ if (!state.listViewColumn) {
+ return state;
+ }
+ return {
+ ...state,
+ listViewColumn: {
+ ...state.listViewColumn,
+ computedWidth: getListColumnWidth(apiRef),
+ },
+ };
+ });
+ };
+
+ const prevInnerWidth = React.useRef(null);
+ const handleGridSizeChange: GridEventListener<'viewportInnerSizeChange'> = (
+ viewportInnerSize,
+ ) => {
+ if (prevInnerWidth.current !== viewportInnerSize.width) {
+ prevInnerWidth.current = viewportInnerSize.width;
+ updateListColumnWidth();
+ }
+ };
+
+ useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+ useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', updateListColumnWidth);
+
+ /*
+ * EFFECTS
+ */
+ React.useEffect(() => {
+ const listColumn = props.unstable_listColumn;
+ if (listColumn) {
+ apiRef.current.setState((state) => {
+ return {
+ ...state,
+ listViewColumn: {
+ ...listColumn,
+ computedWidth: getListColumnWidth(apiRef),
+ },
+ };
+ });
+ }
+ }, [apiRef, props.unstable_listColumn]);
+}
+
+function getListColumnWidth(apiRef: React.MutableRefObject) {
+ return gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width;
+}
diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts b/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts
index b663d9700a78..0b3723567982 100644
--- a/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts
+++ b/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts
@@ -3,6 +3,7 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
import { GridParamsApi } from '../../../models/api/gridParamsApi';
import { GridCellParams } from '../../../models/params/gridCellParams';
import { GridRowParams } from '../../../models/params/gridRowParams';
+import { GridStateColDef } from '../../../models/colDef/gridColDef';
import {
getGridCellElement,
getGridColumnHeaderElement,
@@ -10,6 +11,8 @@ import {
} from '../../../utils/domUtils';
import { useGridApiMethod } from '../../utils/useGridApiMethod';
import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { gridListColumnSelector } from '../listView/gridListViewSelectors';
export class MissingRowIdError extends Error {}
@@ -21,7 +24,10 @@ export class MissingRowIdError extends Error {}
* TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
* TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
*/
-export function useGridParamsApi(apiRef: React.MutableRefObject) {
+export function useGridParamsApi(
+ apiRef: React.MutableRefObject,
+ props: Pick,
+) {
const getColumnHeaderParams = React.useCallback(
(field) => ({
field,
@@ -50,7 +56,11 @@ export function useGridParamsApi(apiRef: React.MutableRefObject(
(id, field) => {
- const colDef = apiRef.current.getColumn(field);
+ const colDef = (
+ props.unstable_listView
+ ? gridListColumnSelector(apiRef.current.state)
+ : apiRef.current.getColumn(field)
+ ) as GridStateColDef;
const row = apiRef.current.getRow(id);
const rowNode = apiRef.current.getRowNode(id);
@@ -86,7 +96,7 @@ export function useGridParamsApi(apiRef: React.MutableRefObject(
diff --git a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts
index 67126ae3366e..067d013bb006 100644
--- a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts
+++ b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts
@@ -17,6 +17,7 @@ import { GridScrollApi } from '../../../models/api/gridScrollApi';
import { useGridApiMethod } from '../../utils/useGridApiMethod';
import { gridExpandedSortedRowEntriesSelector } from '../filter/gridFilterSelector';
import { gridDimensionsSelector } from '../dimensions';
+import { gridListColumnSelector } from '../listView/gridListViewSelectors';
// Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
// Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
@@ -53,7 +54,7 @@ function scrollIntoView(dimensions: {
*/
export const useGridScroll = (
apiRef: React.MutableRefObject,
- props: Pick,
+ props: Pick,
): void => {
const isRtl = useRtl();
const logger = useGridLogger(apiRef, 'useGridScroll');
@@ -67,7 +68,9 @@ export const useGridScroll = (
(params: Partial) => {
const dimensions = gridDimensionsSelector(apiRef.current.state);
const totalRowCount = gridRowCountSelector(apiRef);
- const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+ const visibleColumns = props.unstable_listView
+ ? [gridListColumnSelector(apiRef.current.state)!]
+ : gridVisibleColumnDefinitionsSelector(apiRef);
const scrollToHeader = params.rowIndex == null;
if ((!scrollToHeader && totalRowCount === 0) || visibleColumns.length === 0) {
return false;
@@ -141,7 +144,14 @@ export const useGridScroll = (
return false;
},
- [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows],
+ [
+ logger,
+ apiRef,
+ virtualScrollerRef,
+ props.pagination,
+ visibleSortedRows,
+ props.unstable_listView,
+ ],
);
const scroll = React.useCallback(
diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
index f72c1896480c..7ba0db4ac5da 100644
--- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -46,6 +46,7 @@ import {
} from './gridVirtualizationSelectors';
import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization';
import { gridRowSpanningHiddenCellsOriginMapSelector } from '../rows/gridRowSpanningSelectors';
+import { gridListColumnSelector } from '../listView/gridListViewSelectors';
const MINIMUM_COLUMN_WIDTH = 50;
@@ -99,14 +100,23 @@ try {
export const useGridVirtualScroller = () => {
const apiRef = useGridPrivateApiContext() as React.MutableRefObject;
const rootProps = useGridRootProps();
- const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+ const { unstable_listView: listView } = rootProps;
+ const visibleColumns = useGridSelector(apiRef, () =>
+ listView
+ ? [gridListColumnSelector(apiRef.current.state)!]
+ : gridVisibleColumnDefinitionsSelector(apiRef),
+ );
const enabledForRows = useGridSelector(apiRef, gridVirtualizationRowEnabledSelector) && !isJSDOM;
const enabledForColumns =
useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector) && !isJSDOM;
const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
const outerSize = dimensions.viewportOuterSize;
const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
- const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+ const pinnedColumnDefinitions = useGridSelector(
+ apiRef,
+ gridVisiblePinnedColumnDefinitionsSelector,
+ );
+ const pinnedColumns = listView ? { left: [], right: [] } : pinnedColumnDefinitions;
const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
@@ -205,7 +215,7 @@ export const useGridVirtualScroller = () => {
[apiRef, dimensions.isReady],
);
- const triggerUpdateRenderContext = () => {
+ const triggerUpdateRenderContext = useEventCallback(() => {
const newScroll = {
top: scrollerRef.current!.scrollTop,
left: scrollerRef.current!.scrollLeft,
@@ -274,7 +284,7 @@ export const useGridVirtualScroller = () => {
scrollTimeout.start(1000, triggerUpdateRenderContext);
return nextRenderContext;
- };
+ });
const forceUpdateRenderContext = () => {
const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
@@ -515,10 +525,10 @@ export const useGridVirtualScroller = () => {
const scrollerStyle = React.useMemo(
() =>
({
- overflowX: !needsHorizontalScrollbar ? 'hidden' : undefined,
+ overflowX: !needsHorizontalScrollbar || listView ? 'hidden' : undefined,
overflowY: rootProps.autoHeight ? 'hidden' : undefined,
}) as React.CSSProperties,
- [needsHorizontalScrollbar, rootProps.autoHeight],
+ [needsHorizontalScrollbar, rootProps.autoHeight, listView],
);
const contentSize = React.useMemo(() => {
@@ -560,6 +570,12 @@ export const useGridVirtualScroller = () => {
}
}, [enabledForColumns, enabledForRows, gridRootRef, scrollerRef]);
+ useEnhancedEffect(() => {
+ if (listView) {
+ scrollerRef.current!.scrollLeft = 0;
+ }
+ }, [listView, scrollerRef]);
+
useRunOnce(outerSize.width !== 0, () => {
const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
@@ -629,6 +645,7 @@ type RenderContextInputs = {
pinnedColumns: ReturnType;
visibleColumns: ReturnType;
hiddenCellsOriginMap: ReturnType;
+ listView: boolean;
};
function inputsSelector(
@@ -639,7 +656,9 @@ function inputsSelector(
): RenderContextInputs {
const dimensions = gridDimensionsSelector(apiRef.current.state);
const currentPage = getVisibleRows(apiRef, rootProps);
- const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+ const visibleColumns = rootProps.unstable_listView
+ ? [gridListColumnSelector(apiRef.current.state)!]
+ : gridVisibleColumnDefinitionsSelector(apiRef);
const hiddenCellsOriginMap = gridRowSpanningHiddenCellsOriginMapSelector(apiRef);
const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1);
const lastColumn = visibleColumns.at(-1);
@@ -663,6 +682,7 @@ function inputsSelector(
pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef),
visibleColumns,
hiddenCellsOriginMap,
+ listView: rootProps.unstable_listView ?? false,
};
}
diff --git a/packages/x-data-grid/src/internals/index.ts b/packages/x-data-grid/src/internals/index.ts
index 116388732fe4..d07c6dd7d371 100644
--- a/packages/x-data-grid/src/internals/index.ts
+++ b/packages/x-data-grid/src/internals/index.ts
@@ -134,6 +134,10 @@ export {
columnResizeStateInitializer,
} from '../hooks/features/columnResize/useGridColumnResize';
export { ROW_SELECTION_PROPAGATION_DEFAULT } from '../hooks/features/rowSelection/utils';
+export {
+ useGridListView,
+ listViewStateInitializer,
+} from '../hooks/features/listView/useGridListView';
export { useTimeout } from '../hooks/utils/useTimeout';
export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
diff --git a/packages/x-data-grid/src/models/colDef/gridColDef.ts b/packages/x-data-grid/src/models/colDef/gridColDef.ts
index 039fb6589f5e..c7166347c472 100644
--- a/packages/x-data-grid/src/models/colDef/gridColDef.ts
+++ b/packages/x-data-grid/src/models/colDef/gridColDef.ts
@@ -355,6 +355,16 @@ export type GridColDef =
| GridActionsColDef
| GridSingleSelectColDef;
+/**
+ * Column Definition interface used for the list view column.
+ * @demos
+ * - [List view](/x/react-data-grid/list-view/)
+ */
+export type GridListColDef = Pick<
+ GridBaseColDef,
+ 'field' | 'renderCell' | 'align' | 'cellClassName' | 'display'
+>;
+
export type GridColTypeDef = Omit, 'field'>;
export type GridStateColDef = GridColDef<
diff --git a/packages/x-data-grid/src/models/colDef/index.ts b/packages/x-data-grid/src/models/colDef/index.ts
index 3b0ffa653552..18e0ae90b220 100644
--- a/packages/x-data-grid/src/models/colDef/index.ts
+++ b/packages/x-data-grid/src/models/colDef/index.ts
@@ -4,6 +4,7 @@ export type {
ValueOptions,
GridKeyValue,
GridColDef,
+ GridListColDef,
GridColTypeDef,
GridColumnsMeta,
GridSingleSelectColDef,
diff --git a/packages/x-data-grid/src/models/gridStateCommunity.ts b/packages/x-data-grid/src/models/gridStateCommunity.ts
index 45ea2f7951d7..8cde841094cb 100644
--- a/packages/x-data-grid/src/models/gridStateCommunity.ts
+++ b/packages/x-data-grid/src/models/gridStateCommunity.ts
@@ -26,6 +26,7 @@ import type { GridRowSelectionModel } from './gridRowSelectionModel';
import type { GridVisibleRowsLookupState } from '../hooks/features/filter/gridFilterState';
import type { GridColumnResizeState } from '../hooks/features/columnResize';
import type { GridRowSpanningState } from '../hooks/features/rows/useGridRowSpanning';
+import type { GridListViewState } from '../hooks/features/listView/useGridListView';
/**
* The state of Data Grid.
@@ -53,6 +54,7 @@ export interface GridStateCommunity {
virtualization: GridVirtualizationState;
columnResize: GridColumnResizeState;
rowSpanning: GridRowSpanningState;
+ listViewColumn: GridListViewState;
}
/**
diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts
index e831f19f6eeb..f6d1e46b9afa 100644
--- a/packages/x-data-grid/src/models/props/DataGridProps.ts
+++ b/packages/x-data-grid/src/models/props/DataGridProps.ts
@@ -12,7 +12,7 @@ import { GridRowId, GridRowIdGetter, GridRowsProp, GridValidRowModel } from '../
import { GridEventListener } from '../events';
import { GridCallbackDetails, GridLocaleText } from '../api';
import { GridApiCommunity } from '../api/gridApiCommunity';
-import type { GridColDef } from '../colDef/gridColDef';
+import type { GridColDef, GridListColDef } from '../colDef/gridColDef';
import { GridClasses } from '../../constants/gridClasses';
import {
GridRowHeightParams,
@@ -68,7 +68,8 @@ export type DataGridForcedPropsKey =
| 'throttleRowsMs'
| 'hideFooterRowCount'
| 'pagination'
- | 'signature';
+ | 'signature'
+ | 'unstable_listView';
/**
* The Data Grid options with a default value that must be merged with the value given through props.
@@ -854,14 +855,24 @@ export interface DataGridProSharedPropsWithDefaultValue {
* @default { parents: false, descendants: false }
*/
rowSelectionPropagation: GridRowSelectionPropagation;
+ /**
+ * If `true`, displays the data in a list view.
+ * Use in combination with `unstable_listColumn`.
+ * @default false
+ */
+ unstable_listView: boolean;
}
-export interface DataGridProSharedPropsWithoutDefaultValue {
+export interface DataGridProSharedPropsWithoutDefaultValue {
/**
* Override the height of the header filters.
*/
headerFilterHeight?: number;
unstable_dataSource?: GridDataSource;
+ /**
+ * Definition of the column rendered when the `unstable_listView` prop is enabled.
+ */
+ unstable_listColumn?: GridListColDef;
}
export interface DataGridPremiumSharedPropsWithDefaultValue {
diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
index 8a19bf501a4c..4ad235c405e8 100644
--- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
@@ -228,16 +228,15 @@ describe(' - Row selection', () => {
expect(getRow(0).querySelector('input')).to.have.property('checked', false);
});
- it('should set focus on the cell when clicking the checkbox', () => {
+ it('should set focus on the cell when clicking the checkbox', async () => {
render();
expect(getActiveCell()).to.equal(null);
- // simulate click
const checkboxInput = getCell(0, 0).querySelector('input');
fireUserEvent.mousePress(checkboxInput!);
- expect(getActiveCell()).to.equal('0-0');
+ await waitFor(() => expect(getActiveCell()).to.equal('0-0'));
});
it('should select all visible rows regardless of pagination', () => {
diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json
index 109a85767b9b..6d7d8201a0e3 100644
--- a/packages/x-date-pickers-pro/package.json
+++ b/packages/x-date-pickers-pro/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-date-pickers-pro",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "The Pro plan edition of the Date and Time Picker components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
@@ -96,7 +96,7 @@
}
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-test-utils": "^1.0.17",
"@mui/material": "^5.16.7",
"@mui/system": "^5.16.7",
"@types/luxon": "^3.4.2",
diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
index 823a5adc4fa0..e41859e4304f 100644
--- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
@@ -79,7 +79,7 @@ const DateRangeCalendarMonthContainer = styled('div', {
const weeksContainerHeight = (DAY_RANGE_SIZE + DAY_MARGIN * 2) * 6;
-const DayCalendarForRange = styled(DayCalendar)(({ theme }) => ({
+const InnerDayCalendarForRange = styled(DayCalendar)(({ theme }) => ({
minWidth: 312,
minHeight: weeksContainerHeight,
[`&.${dateRangeCalendarClasses.dayDragging}`]: {
@@ -99,7 +99,9 @@ const DayCalendarForRange = styled(DayCalendar)(({ theme }) => ({
},
},
},
-})) as typeof DayCalendar;
+}));
+
+const DayCalendarForRange = InnerDayCalendarForRange as typeof DayCalendar;
function useDateRangeCalendarDefaultizedProps(
props: DateRangeCalendarProps,
diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx
index 54c6f5f2d7c1..795ff256ed4f 100644
--- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx
@@ -13,7 +13,7 @@ import { DateRange } from '@mui/x-date-pickers-pro/models';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
describe('', () => {
- const { render } = createPickerRenderer();
+ const { render } = createPickerRenderer({ clock: 'fake' });
describe('Field slot: SingleInputDateRangeField', () => {
it('should render the input with a given `name` when `SingleInputDateRangeField` is used', () => {
@@ -38,39 +38,29 @@ describe('', () => {
});
describe('picker state', () => {
- it('should open when focusing the start input', async () => {
+ it('should open when focusing the start input', () => {
const onOpen = spy();
- const { user } = render();
+ render();
- await openPicker({
- type: 'date-range',
- variant: 'mobile',
- initialFocus: 'start',
- click: user.click,
- });
+ openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
expect(onOpen.callCount).to.equal(1);
expect(screen.queryByRole('dialog')).toBeVisible();
});
- it('should open when focusing the end input', async () => {
+ it('should open when focusing the end input', () => {
const onOpen = spy();
- const { user } = render();
+ render();
- await openPicker({
- type: 'date-range',
- variant: 'mobile',
- initialFocus: 'end',
- click: user.click,
- });
+ openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'end' });
expect(onOpen.callCount).to.equal(1);
expect(screen.queryByRole('dialog')).toBeVisible();
});
- it('should call onChange with updated start date then call onChange with updated end date when opening from start input', async () => {
+ it('should call onChange with updated start date then call onChange with updated end date when opening from start input', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
@@ -79,7 +69,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
);
// Open the picker
- await openPicker({
- type: 'date-range',
- variant: 'mobile',
- initialFocus: 'start',
- click: user.click,
- });
+ openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
expect(onChange.callCount).to.equal(0);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
// Change the start date
- await user.click(screen.getByRole('gridcell', { name: '3' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '3' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3));
expect(onChange.lastCall.args[0][1]).toEqualDateTime(defaultValue[1]);
// Change the end date
- await user.click(screen.getByRole('gridcell', { name: '5' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '5' }));
expect(onChange.callCount).to.equal(2);
expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3));
expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 5));
@@ -115,7 +100,7 @@ describe('', () => {
expect(onClose.callCount).to.equal(0);
});
- it('should call onChange with updated end date when opening from end input', async () => {
+ it('should call onChange with updated end date when opening from end input', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
@@ -124,7 +109,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
);
// Open the picker
- await openPicker({
- type: 'date-range',
- variant: 'mobile',
- initialFocus: 'end',
- click: user.click,
- });
+ openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'end' });
expect(onChange.callCount).to.equal(0);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
// Change the end date
- await user.click(screen.getByRole('gridcell', { name: '3' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '3' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]);
expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 3));
@@ -153,7 +133,7 @@ describe('', () => {
expect(onClose.callCount).to.equal(0);
});
- it('should call onClose and onAccept when selecting the end date if props.closeOnSelect = true', async () => {
+ it('should call onClose and onAccept when selecting the end date if props.closeOnSelect = true', () => {
const onAccept = spy();
const onClose = spy();
const defaultValue: DateRange = [
@@ -161,7 +141,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({
- type: 'date-range',
- variant: 'mobile',
- initialFocus: 'end',
- click: user.click,
- });
+ openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'end' });
// Change the end date
- await user.click(screen.getByRole('gridcell', { name: '3' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '3' }));
expect(onAccept.callCount).to.equal(1);
expect(onAccept.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]);
@@ -186,7 +161,7 @@ describe('', () => {
expect(onClose.callCount).to.equal(1);
});
- it('should call onClose and onChange with the initial value when clicking "Cancel" button', async () => {
+ it('should call onClose and onChange with the initial value when clicking "Cancel" button', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
@@ -195,7 +170,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({
- type: 'date-range',
- variant: 'mobile',
- initialFocus: 'start',
- click: user.click,
- });
+ openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
// Change the start date (already tested)
- await user.click(screen.getByRole('gridcell', { name: '3' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '3' }));
// Cancel the modifications
- await user.click(screen.getByText(/cancel/i));
+ fireEvent.click(screen.getByText(/cancel/i));
expect(onChange.callCount).to.equal(2); // Start date change + reset
expect(onChange.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]);
expect(onChange.lastCall.args[0][1]).toEqualDateTime(defaultValue[1]);
@@ -224,7 +194,7 @@ describe('', () => {
expect(onClose.callCount).to.equal(1);
});
- it('should call onClose and onAccept with the live value and onAccept with the live value when clicking the "OK"', async () => {
+ it('should call onClose and onAccept with the live value and onAccept with the live value when clicking the "OK"', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
@@ -233,7 +203,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({
- type: 'date-range',
- variant: 'mobile',
- initialFocus: 'start',
- click: user.click,
- });
+ openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
// Change the start date (already tested)
- await user.click(screen.getByRole('gridcell', { name: '3' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '3' }));
// Accept the modifications
- await user.click(screen.getByText(/ok/i));
+ fireEvent.click(screen.getByText(/ok/i));
expect(onChange.callCount).to.equal(1); // Start date change
expect(onAccept.callCount).to.equal(1);
expect(onAccept.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3));
@@ -261,7 +226,7 @@ describe('', () => {
expect(onClose.callCount).to.equal(1);
});
- it('should call onClose, onChange with empty value and onAccept with empty value when pressing the "Clear" button', async () => {
+ it('should call onClose, onChange with empty value and onAccept with empty value when pressing the "Clear" button', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
@@ -270,7 +235,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({
- type: 'date-range',
- variant: 'mobile',
- initialFocus: 'start',
- click: user.click,
- });
+ openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
// Clear the date
- await user.click(screen.getByText(/clear/i));
+ fireEvent.click(screen.getByText(/clear/i));
expect(onChange.callCount).to.equal(1); // Start date change
expect(onChange.lastCall.args[0]).to.deep.equal([null, null]);
expect(onAccept.callCount).to.equal(1);
@@ -296,12 +256,12 @@ describe('', () => {
expect(onClose.callCount).to.equal(1);
});
- it('should not call onChange or onAccept when pressing "Clear" button with an already null value', async () => {
+ it('should not call onChange or onAccept when pressing "Clear" button with an already null value', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({
- type: 'date-range',
- variant: 'mobile',
- initialFocus: 'start',
- click: user.click,
- });
+ openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
// Clear the date
- await user.click(screen.getByText(/clear/i));
+ fireEvent.click(screen.getByText(/clear/i));
expect(onChange.callCount).to.equal(0);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(1);
diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json
index bd7ce9da83d5..ae54f9ada68b 100644
--- a/packages/x-date-pickers/package.json
+++ b/packages/x-date-pickers/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-date-pickers",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "The community edition of the Date and Time Picker components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
@@ -98,7 +98,7 @@
}
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-test-utils": "^1.0.17",
"@mui/material": "^5.16.7",
"@mui/system": "^5.16.7",
"@types/luxon": "^3.4.2",
diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
index caced1d4fc4e..aafc00857bd5 100644
--- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { fireEvent, screen, waitFor } from '@mui/internal-test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { PickersDay } from '@mui/x-date-pickers/PickersDay';
import { createPickerRenderer, adapterToUse } from 'test/utils/pickers';
@@ -9,28 +9,31 @@ import { createPickerRenderer, adapterToUse } from 'test/utils/pickers';
const isJSDOM = /jsdom/.test(window.navigator.userAgent);
describe('', () => {
- const { render, clock } = createPickerRenderer({ clockConfig: new Date(2019, 0, 2) });
+ const { render, clock } = createPickerRenderer({
+ clock: 'fake',
+ clockConfig: new Date('2019-01-02'),
+ });
- it('switches between views uncontrolled', async () => {
+ it('switches between views uncontrolled', () => {
const handleViewChange = spy();
- const { user } = render(
+ render(
,
);
- await user.click(screen.getByLabelText(/switch to year view/i));
+ fireEvent.click(screen.getByLabelText(/switch to year view/i));
expect(handleViewChange.callCount).to.equal(1);
expect(screen.queryByLabelText(/switch to year view/i)).to.equal(null);
expect(screen.getByLabelText('year view is open, switch to calendar view')).toBeVisible();
});
- it('should allow month and view changing, but not selection when readOnly prop is passed', async () => {
+ it('should allow month and view changing, but not selection when readOnly prop is passed', () => {
const onChangeMock = spy();
const onMonthChangeMock = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByTitle('Previous month'));
+ fireEvent.click(screen.getByTitle('Previous month'));
expect(onMonthChangeMock.callCount).to.equal(1);
- await user.click(screen.getByTitle('Next month'));
+ fireEvent.click(screen.getByTitle('Next month'));
expect(onMonthChangeMock.callCount).to.equal(2);
- await waitFor(() => expect(screen.getAllByRole('rowgroup').length).to.equal(1));
+ clock.runToLast();
- await user.click(screen.getByRole('gridcell', { name: '5' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '5' }));
expect(onChangeMock.callCount).to.equal(0);
- await user.click(screen.getByText('January 2019'));
+ fireEvent.click(screen.getByText('January 2019'));
expect(screen.queryByLabelText('year view is open, switch to calendar view')).toBeVisible();
});
- it('should not allow interaction when disabled prop is passed', async () => {
+ it('should not allow interaction when disabled prop is passed', () => {
const onChangeMock = spy();
const onMonthChangeMock = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByText('January 2019'));
+ fireEvent.click(screen.getByText('January 2019'));
expect(screen.queryByText('January 2019')).toBeVisible();
expect(screen.queryByLabelText('year view is open, switch to calendar view')).to.equal(null);
- await user.setup({ pointerEventsCheck: 0 }).click(screen.getByTitle('Previous month'));
+ fireEvent.click(screen.getByTitle('Previous month'));
expect(onMonthChangeMock.callCount).to.equal(0);
- await user.setup({ pointerEventsCheck: 0 }).click(screen.getByTitle('Next month'));
+ fireEvent.click(screen.getByTitle('Next month'));
expect(onMonthChangeMock.callCount).to.equal(0);
- await user.setup({ pointerEventsCheck: 0 }).click(screen.getByRole('gridcell', { name: '5' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '5' }));
expect(onChangeMock.callCount).to.equal(0);
});
@@ -181,10 +184,10 @@ describe('', () => {
).to.have.text('1');
});
- it('should use `referenceDate` when no value defined', async () => {
+ it('should use `referenceDate` when no value defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
// should make the reference day firstly focusable
expect(screen.getByRole('gridcell', { name: '17' })).to.have.attribute('tabindex', '0');
- await user.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 3, 2, 12, 30));
});
- it('should not use `referenceDate` when a value is defined', async () => {
+ it('should not use `referenceDate` when a value is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 0, 2, 12, 20));
});
- it('should not use `referenceDate` when a defaultValue is defined', async () => {
+ it('should not use `referenceDate` when a defaultValue is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 0, 2, 12, 20));
});
- it('should keep the time of the currently provided date', async () => {
+ it('should keep the time of the currently provided date', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(
adapterToUse.date('2018-01-02T11:11:11.111'),
@@ -289,10 +292,10 @@ describe('', () => {
});
describe('view: month', () => {
- it('should select the closest enabled date in the month if the current date is disabled', async () => {
+ it('should select the closest enabled date in the month if the current date is disabled', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 3, 6));
});
- it('should respect minDate when selecting closest enabled date', async () => {
+ it('should respect minDate when selecting closest enabled date', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 3, 7));
});
- it('should respect maxDate when selecting closest enabled date', async () => {
+ it('should respect maxDate when selecting closest enabled date', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 3, 22));
});
- it('should go to next view without changing the date when no date of the new month is enabled', async () => {
+ it('should go to next view without changing the date when no date of the new month is enabled', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
+ clock.runToLast();
expect(onChange.callCount).to.equal(0);
expect(screen.getByTestId('calendar-month-and-year-text')).to.have.text('April 2019');
});
- it('should use `referenceDate` when no value defined', async () => {
+ it('should use `referenceDate` when no value defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2018, 3, 1, 12, 30));
});
- it('should not use `referenceDate` when a value is defined', async () => {
+ it('should not use `referenceDate` when a value is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 3, 1, 12, 20));
});
- it('should not use `referenceDate` when a defaultValue is defined', async () => {
+ it('should not use `referenceDate` when a defaultValue is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 3, 1, 12, 20));
@@ -438,10 +442,10 @@ describe('', () => {
expect(screen.getAllByTestId('year')).to.have.length(200);
});
- it('should select the closest enabled date in the month if the current date is disabled', async () => {
+ it('should select the closest enabled date in the month if the current date is disabled', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 4, 1));
});
- it('should respect minDate when selecting closest enabled date', async () => {
+ it('should respect minDate when selecting closest enabled date', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2017 = screen.getByText('2017', { selector: 'button' });
- await user.click(year2017);
+ fireEvent.click(year2017);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2017, 4, 12));
});
- it('should respect maxDate when selecting closest enabled date', async () => {
+ it('should respect maxDate when selecting closest enabled date', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 2, 31));
});
- it('should go to next view without changing the date when no date of the new year is enabled', async () => {
+ it('should go to next view without changing the date when no date of the new year is enabled', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
+ clock.runToLast();
expect(onChange.callCount).to.equal(0);
expect(screen.getByTestId('calendar-month-and-year-text')).to.have.text('January 2022');
@@ -545,10 +550,10 @@ describe('', () => {
expect(parentBoundingBox.bottom).not.to.lessThan(buttonBoundingBox.bottom);
});
- it('should use `referenceDate` when no value defined', async () => {
+ it('should use `referenceDate` when no value defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 0, 1, 12, 30));
});
- it('should not use `referenceDate` when a value is defined', async () => {
+ it('should not use `referenceDate` when a value is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 0, 1, 12, 20));
});
- it('should not use `referenceDate` when a defaultValue is defined', async () => {
+ it('should not use `referenceDate` when a defaultValue is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 0, 1, 12, 20));
diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx
index c298769075bb..ea815c570641 100644
--- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx
@@ -1,31 +1,31 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { screen } from '@mui/internal-test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
import { adapterToUse, createPickerRenderer, openPicker } from 'test/utils/pickers';
describe('', () => {
- const { render } = createPickerRenderer();
+ const { render } = createPickerRenderer({ clock: 'fake' });
describe('picker state', () => {
- it('should open when clicking "Choose date"', async () => {
+ it('should open when clicking "Choose date"', () => {
const onOpen = spy();
- const { user } = render();
+ render();
- await user.click(screen.getByLabelText(/Choose date/));
+ fireEvent.click(screen.getByLabelText(/Choose date/));
expect(onOpen.callCount).to.equal(1);
expect(screen.queryByRole('dialog')).toBeVisible();
});
- it('should call onAccept when selecting the same date and time after changing the year', async () => {
+ it('should call onAccept when selecting the same date and time after changing the year', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'date-time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'date-time', variant: 'desktop' });
// Select year
- await user.click(screen.getByRole('radio', { name: '2025' }));
+ fireEvent.click(screen.getByRole('radio', { name: '2025' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2025, 0, 1, 11, 55));
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
// Change the date (same value)
- await user.click(screen.getByRole('gridcell', { name: '1' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '1' }));
expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
// Change the hours (same value)
- await user.click(screen.getByRole('option', { name: '11 hours' }));
+ fireEvent.click(screen.getByRole('option', { name: '11 hours' }));
expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
// Change the minutes (same value)
- await user.click(screen.getByRole('option', { name: '55 minutes' }));
+ fireEvent.click(screen.getByRole('option', { name: '55 minutes' }));
expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
// Change the meridiem (same value)
- await user.click(screen.getByRole('option', { name: 'AM' }));
+ fireEvent.click(screen.getByRole('option', { name: 'AM' }));
expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
expect(onAccept.callCount).to.equal(1);
expect(onClose.callCount).to.equal(1);
});
});
- it('should allow selecting same view multiple times', async () => {
+ it('should allow selecting same view multiple times', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'date-time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'date-time', variant: 'desktop' });
// Change the date multiple times to check that picker doesn't close after cycling through all views internally
- await user.click(screen.getByRole('gridcell', { name: '2' }));
- await user.click(screen.getByRole('gridcell', { name: '3' }));
- await user.click(screen.getByRole('gridcell', { name: '4' }));
- await user.click(screen.getByRole('gridcell', { name: '5' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '3' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '4' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '5' }));
expect(onChange.callCount).to.equal(4);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
// Change the hours
- await user.click(screen.getByRole('option', { name: '10 hours' }));
- await user.click(screen.getByRole('option', { name: '9 hours' }));
+ fireEvent.click(screen.getByRole('option', { name: '10 hours' }));
+ fireEvent.click(screen.getByRole('option', { name: '9 hours' }));
expect(onChange.callCount).to.equal(6);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
// Change the minutes
- await user.click(screen.getByRole('option', { name: '50 minutes' }));
+ fireEvent.click(screen.getByRole('option', { name: '50 minutes' }));
expect(onChange.callCount).to.equal(7);
// Change the meridiem
- await user.click(screen.getByRole('option', { name: 'PM' }));
+ fireEvent.click(screen.getByRole('option', { name: 'PM' }));
expect(onChange.callCount).to.equal(8);
expect(onAccept.callCount).to.equal(1);
expect(onClose.callCount).to.equal(1);
});
describe('prop: timeSteps', () => {
- it('should use "DigitalClock" view renderer, when "timeSteps.minutes" = 60', async () => {
+ it('should use "DigitalClock" view renderer, when "timeSteps.minutes" = 60', () => {
const onChange = spy();
const onAccept = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByLabelText(/Choose date/));
+ fireEvent.click(screen.getByLabelText(/Choose date/));
- await user.click(screen.getByRole('gridcell', { name: '2' }));
- await user.click(screen.getByRole('option', { name: '03:00 AM' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('option', { name: '03:00 AM' }));
expect(onChange.callCount).to.equal(2);
expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 2, 3, 0, 0));
expect(onAccept.callCount).to.equal(1);
});
- it('should accept value and close picker when selecting time on "DigitalClock" view renderer', async () => {
+ it('should accept value and close picker when selecting time on "DigitalClock" view renderer', () => {
const onChange = spy();
const onAccept = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByLabelText(/Choose date/));
+ fireEvent.click(screen.getByLabelText(/Choose date/));
- await user.click(screen.getByRole('option', { name: '03:00 AM' }));
+ fireEvent.click(screen.getByRole('option', { name: '03:00 AM' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 3, 0, 0));
diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx
index 28663c2a7557..f6d1314d7694 100644
--- a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx
@@ -1,17 +1,17 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { screen } from '@mui/internal-test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
import { adapterToUse, createPickerRenderer, openPicker } from 'test/utils/pickers';
describe('', () => {
- describe('rendering behavior', () => {
- const { render } = createPickerRenderer({
- clock: 'fake',
- clockConfig: new Date('2018-01-01T10:05:05.000'),
- });
+ const { render } = createPickerRenderer({
+ clock: 'fake',
+ clockConfig: new Date('2018-01-01T10:05:05.000'),
+ });
+ describe('rendering behavior', () => {
it('should render "accept" action and 3 time sections by default', () => {
render();
@@ -60,14 +60,12 @@ describe('', () => {
});
describe('selecting behavior', () => {
- const { render } = createPickerRenderer();
-
- it('should call "onAccept", "onChange", and "onClose" when selecting a single option', async () => {
+ it('should call "onAccept", "onChange", and "onClose" when selecting a single option', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'time', variant: 'desktop' });
- await user.click(screen.getByRole('option', { name: '09:00 AM' }));
+ fireEvent.click(screen.getByRole('option', { name: '09:00 AM' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 9, 0));
expect(onAccept.callCount).to.equal(1);
@@ -87,12 +85,12 @@ describe('', () => {
expect(onClose.callCount).to.equal(1);
});
- it('should call "onAccept", "onChange", and "onClose" when selecting all section', async () => {
+ it('should call "onAccept", "onChange", and "onClose" when selecting all section', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'time', variant: 'desktop' });
- await user.click(screen.getByRole('option', { name: '2 hours' }));
+ fireEvent.click(screen.getByRole('option', { name: '2 hours' }));
expect(onChange.callCount).to.equal(1);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
- await user.click(screen.getByRole('option', { name: '15 minutes' }));
+ fireEvent.click(screen.getByRole('option', { name: '15 minutes' }));
expect(onChange.callCount).to.equal(2);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
- await user.click(screen.getByRole('option', { name: 'PM' }));
+ fireEvent.click(screen.getByRole('option', { name: 'PM' }));
expect(onChange.callCount).to.equal(3);
expect(onAccept.callCount).to.equal(1);
expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 14, 15));
expect(onClose.callCount).to.equal(1);
});
- it('should allow out of order section selection', async () => {
+ it('should allow out of order section selection', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'time', variant: 'desktop' });
- await user.click(screen.getByRole('option', { name: '15 minutes' }));
+ fireEvent.click(screen.getByRole('option', { name: '15 minutes' }));
expect(onChange.callCount).to.equal(1);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
- await user.click(screen.getByRole('option', { name: '2 hours' }));
+ fireEvent.click(screen.getByRole('option', { name: '2 hours' }));
expect(onChange.callCount).to.equal(2);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
- await user.click(screen.getByRole('option', { name: '25 minutes' }));
+ fireEvent.click(screen.getByRole('option', { name: '25 minutes' }));
expect(onChange.callCount).to.equal(3);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
- await user.click(screen.getByRole('option', { name: 'PM' }));
+ fireEvent.click(screen.getByRole('option', { name: 'PM' }));
expect(onChange.callCount).to.equal(4);
expect(onAccept.callCount).to.equal(1);
expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 14, 25));
expect(onClose.callCount).to.equal(1);
});
- it('should finish selection when selecting only the last section', async () => {
+ it('should finish selection when selecting only the last section', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'time', variant: 'desktop' });
- await user.click(screen.getByRole('option', { name: 'PM' }));
+ fireEvent.click(screen.getByRole('option', { name: 'PM' }));
expect(onChange.callCount).to.equal(1);
expect(onAccept.callCount).to.equal(1);
expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 12, 0));
diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
index a5f4f18086b8..e5442cc50276 100644
--- a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { spy } from 'sinon';
import { expect } from 'chai';
-import { fireTouchChangedEvent, screen } from '@mui/internal-test-utils';
+import { fireEvent, fireTouchChangedEvent, screen } from '@mui/internal-test-utils';
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
import {
createPickerRenderer,
@@ -12,23 +12,23 @@ import {
} from 'test/utils/pickers';
describe('', () => {
- const { render } = createPickerRenderer();
+ const { render } = createPickerRenderer({ clock: 'fake' });
describe('picker state', () => {
- it('should open when clicking the input', async () => {
+ it('should open when clicking the input', () => {
const onOpen = spy();
- const { user } = render();
+ render();
- await user.click(getFieldSectionsContainer());
+ fireEvent.click(getFieldSectionsContainer());
expect(onOpen.callCount).to.equal(1);
expect(screen.queryByRole('dialog')).toBeVisible();
});
- it('should fire a change event when meridiem changes', async () => {
+ it('should fire a change event when meridiem changes', () => {
const handleChange = spy();
- const { user } = render(
+ render(
', () => {
);
const buttonPM = screen.getByRole('button', { name: 'PM' });
- await user.click(buttonPM);
+ fireEvent.click(buttonPM);
expect(handleChange.callCount).to.equal(1);
expect(handleChange.firstCall.args[0]).toEqualDateTime(new Date(2019, 0, 1, 16, 20));
});
- it('should call onChange when selecting each view', async function test() {
+ it('should call onChange when selecting each view', function test() {
if (typeof window.Touch === 'undefined' || typeof window.TouchEvent === 'undefined') {
this.skip();
}
@@ -55,7 +55,7 @@ describe('', () => {
const onClose = spy();
const defaultValue = adapterToUse.date('2018-01-01');
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'time', variant: 'mobile', click: user.click });
+ openPicker({ type: 'time', variant: 'mobile' });
// Change the hours
const hourClockEvent = getClockTouchEvent(11, '12hours');
diff --git a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx
index 58d3b35893ac..28d7e3026784 100644
--- a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx
+++ b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx
@@ -1,12 +1,12 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { screen } from '@mui/internal-test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
import { PickersActionBar } from '@mui/x-date-pickers/PickersActionBar';
import { createPickerRenderer } from 'test/utils/pickers';
describe('', () => {
- const { render } = createPickerRenderer();
+ const { render } = createPickerRenderer({ clock: 'fake' });
it('should not render buttons if actions array is empty', () => {
const onAccept = () => {};
@@ -26,13 +26,13 @@ describe('', () => {
expect(screen.queryByRole('button')).to.equal(null);
});
- it('should render button for "clear" action calling the associated callback', async () => {
+ it('should render button for "clear" action calling the associated callback', () => {
const onAccept = spy();
const onClear = spy();
const onCancel = spy();
const onSetToday = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByText(/clear/i));
+ fireEvent.click(screen.getByText(/clear/i));
expect(onClear.callCount).to.equal(1);
});
- it('should render button for "cancel" action calling the associated callback', async () => {
+ it('should render button for "cancel" action calling the associated callback', () => {
const onAccept = spy();
const onClear = spy();
const onCancel = spy();
const onSetToday = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByText(/cancel/i));
+ fireEvent.click(screen.getByText(/cancel/i));
expect(onCancel.callCount).to.equal(1);
});
- it('should render button for "accept" action calling the associated callback', async () => {
+ it('should render button for "accept" action calling the associated callback', () => {
const onAccept = spy();
const onClear = spy();
const onCancel = spy();
const onSetToday = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByText(/ok/i));
+ fireEvent.click(screen.getByText(/ok/i));
expect(onAccept.callCount).to.equal(1);
});
- it('should render button for "today" action calling the associated callback', async () => {
+ it('should render button for "today" action calling the associated callback', () => {
const onAccept = spy();
const onClear = spy();
const onCancel = spy();
const onSetToday = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByText(/today/i));
+ fireEvent.click(screen.getByText(/today/i));
expect(onSetToday.callCount).to.equal(1);
});
diff --git a/packages/x-date-pickers/src/PickersSectionList/PickersSectionList.tsx b/packages/x-date-pickers/src/PickersSectionList/PickersSectionList.tsx
index 362fecaaa716..ae8db0f9ee84 100644
--- a/packages/x-date-pickers/src/PickersSectionList/PickersSectionList.tsx
+++ b/packages/x-date-pickers/src/PickersSectionList/PickersSectionList.tsx
@@ -60,15 +60,6 @@ interface PickersSectionProps extends Pick,
) => React.JSX.Element) & { propTypes?: any };
+/**
+ * Demos:
+ *
+ * - [Custom field](https://mui.com/x/react-date-pickers/custom-field/)
+ *
+ * API:
+ *
+ * - [PickersSectionList API](https://mui.com/x/api/date-pickers/pickers-section-list/)
+ */
const PickersSectionList = React.forwardRef(function PickersSectionList(
inProps: PickersSectionListProps,
ref: React.Ref,
diff --git a/packages/x-internals/package.json b/packages/x-internals/package.json
index 94c1f8969389..148ed86ce6e9 100644
--- a/packages/x-internals/package.json
+++ b/packages/x-internals/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-internals",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "Utility functions for the MUI X packages (internal use only).",
"author": "MUI Team",
"license": "MIT",
@@ -48,7 +48,7 @@
"react": "^17.0.0 || ^18.0.0"
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-test-utils": "^1.0.17",
"rimraf": "^6.0.1"
},
"engines": {
diff --git a/packages/x-license/package.json b/packages/x-license/package.json
index dca472c63710..8dc6070e560a 100644
--- a/packages/x-license/package.json
+++ b/packages/x-license/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-license",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "MUI X License verification",
"author": "MUI Team",
"main": "src/index.ts",
@@ -41,7 +41,7 @@
"react": "^17.0.0 || ^18.0.0"
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-test-utils": "^1.0.17",
"rimraf": "^6.0.1"
},
"engines": {
diff --git a/packages/x-tree-view-pro/package.json b/packages/x-tree-view-pro/package.json
index 9f7b6ba9177b..de2ebcdfb5c5 100644
--- a/packages/x-tree-view-pro/package.json
+++ b/packages/x-tree-view-pro/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-tree-view-pro",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "The Pro plan edition of the Tree View components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
@@ -70,7 +70,7 @@
}
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-test-utils": "^1.0.17",
"@mui/material": "^5.16.7",
"@mui/system": "^5.16.7",
"@types/prop-types": "^15.7.13",
diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx
index 5f6da5132f33..126919c04ba5 100644
--- a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx
+++ b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx
@@ -68,7 +68,7 @@ const RichTreeViewPro = React.forwardRef(function RichTreeViewPro<
if (process.env.NODE_ENV !== 'production') {
if ((props as any).children != null) {
warnOnce([
- 'MUI X: The `RichTreeViewPro` component does not support JSX children.',
+ 'MUI X: The `` component does not support JSX children.',
'If you want to add items, you need to use the `items` prop.',
'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/.',
]);
@@ -140,7 +140,7 @@ RichTreeViewPro.propTypes = {
*/
canMoveItemToNewPosition: PropTypes.func,
/**
- * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+ * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
* @default false
*/
checkboxSelection: PropTypes.bool,
@@ -258,26 +258,26 @@ RichTreeViewPro.propTypes = {
*/
multiSelect: PropTypes.bool,
/**
- * Callback fired when tree items are expanded/collapsed.
+ * Callback fired when Tree Items are expanded/collapsed.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemIds The ids of the expanded items.
*/
onExpandedItemsChange: PropTypes.func,
/**
- * Callback fired when the `content` slot of a given tree item is clicked.
+ * Callback fired when the `content` slot of a given Tree Item is clicked.
* @param {React.MouseEvent} event The DOM event that triggered the change.
* @param {string} itemId The id of the focused item.
*/
onItemClick: PropTypes.func,
/**
- * Callback fired when a tree item is expanded or collapsed.
+ * Callback fired when a Tree Item is expanded or collapsed.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemId The itemId of the modified item.
* @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
*/
onItemExpansionToggle: PropTypes.func,
/**
- * Callback fired when a given tree item is focused.
+ * Callback fired when a given Tree Item is focused.
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
* @param {string} itemId The id of the focused item.
*/
@@ -289,7 +289,7 @@ RichTreeViewPro.propTypes = {
*/
onItemLabelChange: PropTypes.func,
/**
- * Callback fired when a tree item is moved in the tree.
+ * Callback fired when a Tree Item is moved in the tree.
* @param {object} params The params describing the item re-ordering.
* @param {string} params.itemId The id of the item moved.
* @param {TreeViewItemReorderPosition} params.oldPosition The old position of the item.
@@ -297,14 +297,14 @@ RichTreeViewPro.propTypes = {
*/
onItemPositionChange: PropTypes.func,
/**
- * Callback fired when a tree item is selected or deselected.
+ * Callback fired when a Tree Item is selected or deselected.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemId The itemId of the modified item.
* @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
*/
onItemSelectionToggle: PropTypes.func,
/**
- * Callback fired when tree items are selected/deselected.
+ * Callback fired when Tree Items are selected/deselected.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {string[] | string} itemIds The ids of the selected items.
* When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts
index 263083dce4a9..fe0d7a8a29c6 100644
--- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts
+++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts
@@ -256,7 +256,7 @@ useTreeViewItemsReordering.getDefaultizedParams = ({ params, experimentalFeature
if (params.itemsReordering && !canUseFeature) {
warnOnce([
'MUI X: The items reordering feature requires the `indentationAtItemLevel` and `itemsReordering` experimental features to be enabled.',
- 'You can do it by passing `experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}` to the `RichTreeViewPro` component.',
+ 'You can do it by passing `experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}` to the ``component.',
'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/',
]);
}
diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts
index 25f2fe2a4b30..aa5f519e2c85 100644
--- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts
+++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts
@@ -90,7 +90,7 @@ export interface UseTreeViewItemsReorderingParameters {
newPosition: TreeViewItemReorderPosition;
}) => boolean;
/**
- * Callback fired when a tree item is moved in the tree.
+ * Callback fired when a Tree Item is moved in the tree.
* @param {object} params The params describing the item re-ordering.
* @param {string} params.itemId The id of the item moved.
* @param {TreeViewItemReorderPosition} params.oldPosition The old position of the item.
diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json
index 1614f7d4374d..8e46c3d60740 100644
--- a/packages/x-tree-view/package.json
+++ b/packages/x-tree-view/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-tree-view",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "The community edition of the Tree View components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
@@ -68,7 +68,7 @@
}
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-test-utils": "^1.0.17",
"@mui/material": "^5.16.7",
"@mui/system": "^5.16.7",
"@types/prop-types": "^15.7.13",
diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx
index d030df14bd9a..cf5ff069ef5b 100644
--- a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx
+++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx
@@ -61,7 +61,7 @@ const RichTreeView = React.forwardRef(function RichTreeView<
if (process.env.NODE_ENV !== 'production') {
if ((props as any).children != null) {
warnOnce([
- 'MUI X: The `RichTreeView` component does not support JSX children.',
+ 'MUI X: The Rich Tree View component does not support JSX children.',
'If you want to add items, you need to use the `items` prop.',
'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/.',
]);
@@ -123,7 +123,7 @@ RichTreeView.propTypes = {
}),
}),
/**
- * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+ * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
* @default false
*/
checkboxSelection: PropTypes.bool,
@@ -226,26 +226,26 @@ RichTreeView.propTypes = {
*/
multiSelect: PropTypes.bool,
/**
- * Callback fired when tree items are expanded/collapsed.
+ * Callback fired when Tree Items are expanded/collapsed.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemIds The ids of the expanded items.
*/
onExpandedItemsChange: PropTypes.func,
/**
- * Callback fired when the `content` slot of a given tree item is clicked.
+ * Callback fired when the `content` slot of a given Tree Item is clicked.
* @param {React.MouseEvent} event The DOM event that triggered the change.
* @param {string} itemId The id of the focused item.
*/
onItemClick: PropTypes.func,
/**
- * Callback fired when a tree item is expanded or collapsed.
+ * Callback fired when a Tree Item is expanded or collapsed.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemId The itemId of the modified item.
* @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
*/
onItemExpansionToggle: PropTypes.func,
/**
- * Callback fired when a given tree item is focused.
+ * Callback fired when a given Tree Item is focused.
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
* @param {string} itemId The id of the focused item.
*/
@@ -257,14 +257,14 @@ RichTreeView.propTypes = {
*/
onItemLabelChange: PropTypes.func,
/**
- * Callback fired when a tree item is selected or deselected.
+ * Callback fired when a Tree Item is selected or deselected.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemId The itemId of the modified item.
* @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
*/
onItemSelectionToggle: PropTypes.func,
/**
- * Callback fired when tree items are selected/deselected.
+ * Callback fired when Tree Items are selected/deselected.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {string[] | string} itemIds The ids of the selected items.
* When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx
index adfe2d35415b..ff7ae4313935 100644
--- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx
+++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx
@@ -62,7 +62,7 @@ const SimpleTreeView = React.forwardRef(function SimpleTreeView<
if (process.env.NODE_ENV !== 'production') {
if ((props as any).items != null) {
warnOnce([
- 'MUI X: The `SimpleTreeView` component does not support the `items` prop.',
+ 'MUI X: The Simple Tree View component does not support the `items` prop.',
'If you want to add items, you need to pass them as JSX children.',
'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/.',
]);
@@ -117,7 +117,7 @@ SimpleTreeView.propTypes = {
}),
}),
/**
- * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+ * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
* @default false
*/
checkboxSelection: PropTypes.bool,
@@ -187,39 +187,39 @@ SimpleTreeView.propTypes = {
*/
multiSelect: PropTypes.bool,
/**
- * Callback fired when tree items are expanded/collapsed.
+ * Callback fired when Tree Items are expanded/collapsed.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemIds The ids of the expanded items.
*/
onExpandedItemsChange: PropTypes.func,
/**
- * Callback fired when the `content` slot of a given tree item is clicked.
+ * Callback fired when the `content` slot of a given Tree Item is clicked.
* @param {React.MouseEvent} event The DOM event that triggered the change.
* @param {string} itemId The id of the focused item.
*/
onItemClick: PropTypes.func,
/**
- * Callback fired when a tree item is expanded or collapsed.
+ * Callback fired when a Tree Item is expanded or collapsed.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemId The itemId of the modified item.
* @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
*/
onItemExpansionToggle: PropTypes.func,
/**
- * Callback fired when a given tree item is focused.
+ * Callback fired when a given Tree Item is focused.
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
* @param {string} itemId The id of the focused item.
*/
onItemFocus: PropTypes.func,
/**
- * Callback fired when a tree item is selected or deselected.
+ * Callback fired when a Tree Item is selected or deselected.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemId The itemId of the modified item.
* @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
*/
onItemSelectionToggle: PropTypes.func,
/**
- * Callback fired when tree items are selected/deselected.
+ * Callback fired when Tree Items are selected/deselected.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {string[] | string} itemIds The ids of the selected items.
* When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx
index 898f14212517..4204ae102656 100644
--- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx
+++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx
@@ -382,7 +382,7 @@ export const TreeItem = React.forwardRef(function TreeItem(
onBlur?.(event);
if (
editing ||
- // we can exit the editing state by clicking outside the input (within the tree item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases
+ // we can exit the editing state by clicking outside the input (within the Tree Item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases
// we can also exit the editing state by clicking on the root itself -> want to remove the focused item from the state in this case
(event.relatedTarget &&
isTargetInDescendants(event.relatedTarget as HTMLElement, rootRefObject.current) &&
@@ -523,13 +523,13 @@ TreeItem.propTypes = {
className: PropTypes.string,
/**
* The component used to render the content of the item.
- * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
+ * @deprecated Consider using the `` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/.
* @default TreeItemContent
*/
ContentComponent: elementTypeAcceptingRef,
/**
* Props applied to ContentComponent.
- * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
+ * @deprecated Consider using the `` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/.
*/
ContentProps: PropTypes.object,
/**
@@ -542,7 +542,7 @@ TreeItem.propTypes = {
*/
itemId: PropTypes.string.isRequired,
/**
- * The tree item label.
+ * The Tree Item label.
*/
label: PropTypes.node,
/**
diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts
index d8e49fc3cea5..c00ccde26717 100644
--- a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts
+++ b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts
@@ -29,7 +29,7 @@ export interface TreeItemSlots {
*/
endIcon?: React.ElementType;
/**
- * The icon to display next to the tree item's label.
+ * The icon to display next to the Tree Item's label.
*/
icon?: React.ElementType;
/**
@@ -69,13 +69,13 @@ export interface TreeItemProps extends Omit,
slotProps?: TreeItemSlotProps;
/**
* The component used to render the content of the item.
- * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
+ * @deprecated Consider using the `` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/.
* @default TreeItemContent
*/
ContentComponent?: React.JSXElementConstructor;
/**
* Props applied to ContentComponent.
- * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
+ * @deprecated Consider using the `` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/.
*/
ContentProps?: React.HTMLAttributes & { ref?: React.Ref };
/**
@@ -89,7 +89,7 @@ export interface TreeItemProps extends Omit,
*/
onFocus?: null;
/**
- * The tree item label.
+ * The Tree Item label.
*/
label?: React.ReactNode;
/**
@@ -115,7 +115,7 @@ export interface TreeItemOwnerState extends TreeItemProps {
}
/**
- * Plugins that need to be present in the Tree View in order for `TreeItem` to work correctly.
+ * Plugins that need to be present in the Tree View in order for Tree Item to work correctly.
*/
export type TreeItemMinimalPlugins = readonly [
UseTreeViewIconsSignature,
@@ -127,6 +127,6 @@ export type TreeItemMinimalPlugins = readonly [
];
/**
- * Plugins that `TreeItem` can use if they are present, but are not required.
+ * Plugins that Tree Item can use if they are present, but are not required.
*/
export type TreeItemOptionalPlugins = readonly [];
diff --git a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx b/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx
index 61f3bacc9203..5df9134e2cf1 100644
--- a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx
+++ b/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx
@@ -26,7 +26,7 @@ export interface TreeItemContentProps extends React.HTMLAttributes
focused: string;
/** State class applied to the element when disabled. */
disabled: string;
- /** Styles applied to the tree item icon and collapse/expand icon. */
+ /** Styles applied to the Tree Item icon and collapse/expand icon. */
iconContainer: string;
/** Styles applied to the label element. */
label: string;
@@ -40,7 +40,7 @@ export interface TreeItemContentProps extends React.HTMLAttributes
editable: string;
};
/**
- * The tree item label.
+ * The Tree Item label.
*/
label?: React.ReactNode;
/**
@@ -48,15 +48,15 @@ export interface TreeItemContentProps extends React.HTMLAttributes
*/
itemId: string;
/**
- * The icon to display next to the tree item's label.
+ * The icon to display next to the Tree Item's label.
*/
icon?: React.ReactNode;
/**
- * The icon to display next to the tree item's label. Either an expansion or collapse icon.
+ * The icon to display next to the Tree Item's label. Either an expansion or collapse icon.
*/
expansionIcon?: React.ReactNode;
/**
- * The icon to display next to the tree item's label. Either a parent or end icon.
+ * The icon to display next to the Tree Item's label. Either a parent or end icon.
*/
displayIcon?: React.ReactNode;
dragAndDropOverlayProps?: TreeItem2DragAndDropOverlayProps;
@@ -199,7 +199,7 @@ TreeItemContent.propTypes = {
classes: PropTypes.object.isRequired,
className: PropTypes.string,
/**
- * The icon to display next to the tree item's label. Either a parent or end icon.
+ * The icon to display next to the Tree Item's label. Either a parent or end icon.
*/
displayIcon: PropTypes.node,
dragAndDropOverlayProps: PropTypes.shape({
@@ -207,11 +207,11 @@ TreeItemContent.propTypes = {
style: PropTypes.object,
}),
/**
- * The icon to display next to the tree item's label. Either an expansion or collapse icon.
+ * The icon to display next to the Tree Item's label. Either an expansion or collapse icon.
*/
expansionIcon: PropTypes.node,
/**
- * The icon to display next to the tree item's label.
+ * The icon to display next to the Tree Item's label.
*/
icon: PropTypes.node,
/**
@@ -219,7 +219,7 @@ TreeItemContent.propTypes = {
*/
itemId: PropTypes.string.isRequired,
/**
- * The tree item label.
+ * The Tree Item label.
*/
label: PropTypes.node,
labelInputProps: PropTypes.shape({
diff --git a/packages/x-tree-view/src/TreeItem/treeItemClasses.ts b/packages/x-tree-view/src/TreeItem/treeItemClasses.ts
index 6b0efd7279ce..2769166f4676 100644
--- a/packages/x-tree-view/src/TreeItem/treeItemClasses.ts
+++ b/packages/x-tree-view/src/TreeItem/treeItemClasses.ts
@@ -16,7 +16,7 @@ export interface TreeItemClasses {
focused: string;
/** State class applied to the element when disabled. */
disabled: string;
- /** Styles applied to the tree item icon. */
+ /** Styles applied to the Tree Item icon. */
iconContainer: string;
/** Styles applied to the label element. */
label: string;
diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts b/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts
index 192e62a92716..e72de430bd95 100644
--- a/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts
+++ b/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts
@@ -44,7 +44,7 @@ export interface TreeItem2Slots extends TreeItem2IconSlots {
labelInput?: React.ElementType;
/**
* The component that renders the overlay when an item reordering is ongoing.
- * Warning: This slot is only useful when using the `RichTreeViewPro` component.
+ * Warning: This slot is only useful when using the `` component.
* @default TreeItem2DragAndDropOverlay
*/
dragAndDropOverlay?: React.ElementType;
diff --git a/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts b/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts
index cd66abb4f8a2..80336366ac46 100644
--- a/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts
+++ b/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts
@@ -16,7 +16,7 @@ export interface TreeItem2IconSlots {
*/
endIcon?: React.ElementType;
/**
- * The icon to display next to the tree item's label.
+ * The icon to display next to the Tree Item's label.
*/
icon?: React.ElementType;
}
diff --git a/packages/x-tree-view/src/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx
index 73c38055ee9a..efe8947e4c94 100644
--- a/packages/x-tree-view/src/TreeView/TreeView.tsx
+++ b/packages/x-tree-view/src/TreeView/TreeView.tsx
@@ -50,7 +50,7 @@ const warn = () => {
};
/**
- * This component has been deprecated in favor of the new `SimpleTreeView` component.
+ * This component has been deprecated in favor of the new Simple Tree View component.
* You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
*
* Demos:
@@ -104,7 +104,7 @@ TreeView.propTypes = {
}),
}),
/**
- * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+ * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
* @default false
*/
checkboxSelection: PropTypes.bool,
@@ -174,39 +174,39 @@ TreeView.propTypes = {
*/
multiSelect: PropTypes.bool,
/**
- * Callback fired when tree items are expanded/collapsed.
+ * Callback fired when Tree Items are expanded/collapsed.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemIds The ids of the expanded items.
*/
onExpandedItemsChange: PropTypes.func,
/**
- * Callback fired when the `content` slot of a given tree item is clicked.
+ * Callback fired when the `content` slot of a given Tree Item is clicked.
* @param {React.MouseEvent} event The DOM event that triggered the change.
* @param {string} itemId The id of the focused item.
*/
onItemClick: PropTypes.func,
/**
- * Callback fired when a tree item is expanded or collapsed.
+ * Callback fired when a Tree Item is expanded or collapsed.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemId The itemId of the modified item.
* @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
*/
onItemExpansionToggle: PropTypes.func,
/**
- * Callback fired when a given tree item is focused.
+ * Callback fired when a given Tree Item is focused.
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
* @param {string} itemId The id of the focused item.
*/
onItemFocus: PropTypes.func,
/**
- * Callback fired when a tree item is selected or deselected.
+ * Callback fired when a Tree Item is selected or deselected.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemId The itemId of the modified item.
* @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
*/
onItemSelectionToggle: PropTypes.func,
/**
- * Callback fired when tree items are selected/deselected.
+ * Callback fired when Tree Items are selected/deselected.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {string[] | string} itemIds The ids of the selected items.
* When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
diff --git a/packages/x-tree-view/src/internals/corePlugins/corePlugins.ts b/packages/x-tree-view/src/internals/corePlugins/corePlugins.ts
index f6aa4c84a219..76f050c33c8f 100644
--- a/packages/x-tree-view/src/internals/corePlugins/corePlugins.ts
+++ b/packages/x-tree-view/src/internals/corePlugins/corePlugins.ts
@@ -5,7 +5,7 @@ import { ConvertPluginsIntoSignatures } from '../models';
/**
* Internal plugins that create the tools used by the other plugins.
- * These plugins are used by the tree view components.
+ * These plugins are used by the Tree View components.
*/
export const TREE_VIEW_CORE_PLUGINS = [
useTreeViewInstanceEvents,
diff --git a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts
index cbf443431f4e..bb059671285c 100644
--- a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts
+++ b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts
@@ -8,11 +8,9 @@ export const useTreeViewId: TreeViewPlugin = ({
state,
setState,
}) => {
- const treeId = state.id.treeId;
-
React.useEffect(() => {
setState((prevState) => {
- if (prevState.id.treeId === params.id) {
+ if (prevState.id.treeId === params.id && prevState.id.treeId !== undefined) {
return prevState;
}
@@ -23,6 +21,8 @@ export const useTreeViewId: TreeViewPlugin = ({
});
}, [setState, params.id]);
+ const treeId = params.id ?? state.id.treeId;
+
return {
getRootProps: () => ({
id: treeId,
@@ -37,4 +37,4 @@ useTreeViewId.params = {
id: true,
};
-useTreeViewId.getInitialState = ({ id }) => ({ id: { treeId: id ?? createTreeViewDefaultId() } });
+useTreeViewId.getInitialState = ({ id }) => ({ id: { treeId: id ?? undefined } });
diff --git a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts
index 392a77e8585c..7baa508f7097 100644
--- a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts
+++ b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts
@@ -12,7 +12,7 @@ export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
export interface UseTreeViewIdState {
id: {
- treeId: string;
+ treeId: string | undefined;
};
}
diff --git a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.utils.ts b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.utils.ts
index 8a8e42ef69ec..f1cffe3debfd 100644
--- a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.utils.ts
+++ b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.utils.ts
@@ -7,7 +7,7 @@ export const createTreeViewDefaultId = () => {
};
/**
- * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a tree item.
+ * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a Tree Item.
* If the user explicitly defined an id attribute, it will be returned.
* Otherwise, the method creates a unique id for the item based on the Tree View id attribute and the item `itemId`
* @param {object} params The parameters to determine the id attribute of the item.
diff --git a/packages/x-tree-view/src/internals/models/treeView.ts b/packages/x-tree-view/src/internals/models/treeView.ts
index ad86ffeb39ac..df139e952924 100644
--- a/packages/x-tree-view/src/internals/models/treeView.ts
+++ b/packages/x-tree-view/src/internals/models/treeView.ts
@@ -9,11 +9,11 @@ export interface TreeViewItemMeta {
expandable: boolean;
disabled: boolean;
/**
- * Only defined for `RichTreeView` and `RichTreeViewPro`.
+ * Only defined for `` and ``.
*/
depth?: number;
/**
- * Only defined for `RichTreeView` and `RichTreeViewPro`.
+ * Only defined for `` and ``.
*/
label?: string;
}
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts
index 88460ccf2fee..504676c31d77 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts
@@ -57,13 +57,13 @@ export interface UseTreeViewExpansionParameters {
*/
defaultExpandedItems?: string[];
/**
- * Callback fired when tree items are expanded/collapsed.
+ * Callback fired when Tree Items are expanded/collapsed.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemIds The ids of the expanded items.
*/
onExpandedItemsChange?: (event: React.SyntheticEvent, itemIds: string[]) => void;
/**
- * Callback fired when a tree item is expanded or collapsed.
+ * Callback fired when a Tree Item is expanded or collapsed.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemId The itemId of the modified item.
* @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts
index 9fb3d1038316..c84b650be8d5 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts
@@ -40,7 +40,7 @@ export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
export interface UseTreeViewFocusParameters {
/**
- * Callback fired when a given tree item is focused.
+ * Callback fired when a given Tree Item is focused.
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
* @param {string} itemId The id of the focused item.
*/
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts
index a303f54a8410..19b8b5e96ccd 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts
@@ -19,7 +19,7 @@ interface UseTreeViewIconsSlots {
expandIcon?: React.ElementType;
/**
* The default icon displayed next to an end item.
- * This is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.
+ * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
*/
endIcon?: React.ElementType;
}
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts
index 93761ead527e..864fc7c3c5ba 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts
@@ -12,7 +12,7 @@ export interface TreeViewItemToRenderProps {
export interface UseTreeViewItemsPublicAPI {
/**
* Get the item with the given id.
- * When used in the `SimpleTreeView`, it returns an object with the `id` and `label` properties.
+ * When used in the Simple Tree View, it returns an object with the `id` and `label` properties.
* @param {string} itemId The id of the item to retrieve.
* @returns {R} The item with the given id.
*/
@@ -119,7 +119,7 @@ export interface UseTreeViewItemsParameters {
*/
getItemId?: (item: R) => TreeViewItemId;
/**
- * Callback fired when the `content` slot of a given tree item is clicked.
+ * Callback fired when the `content` slot of a given Tree Item is clicked.
* @param {React.MouseEvent} event The DOM event that triggered the change.
* @param {string} itemId The id of the focused item.
*/
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx
index cdfd84fa5aca..99cb192142c1 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx
@@ -42,7 +42,7 @@ export const useTreeViewJSXItems: TreeViewPlugin =
items: {
...prevState.items,
itemMetaMap: { ...prevState.items.itemMetaMap, [item.id]: item },
- // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
+ // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
itemMap: { ...prevState.items.itemMap, [item.id]: { id: item.id, label: item.label } },
},
};
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.ts
index ef43558d8394..460b4667674c 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.ts
@@ -91,7 +91,7 @@ useTreeViewLabel.getDefaultizedParams = ({ params, experimentalFeatures }) => {
if (params.isItemEditable && !canUseFeature) {
warnOnce([
'MUI X: The label editing feature requires the `labelEditing` experimental feature to be enabled.',
- 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the `RichTreeViewPro` component.',
+ 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the Rich Tree View Pro component.',
'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/editing/',
]);
}
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.ts
index 3f23f27ca86d..949abca3a40f 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.ts
@@ -39,7 +39,7 @@ export interface UseTreeViewLabelInstance extends UseTreeViewLabelPublicAPI {
*/
isItemEditable: (itemId: TreeViewItemId) => boolean;
/**
- * Set to `true` if the tree view is editable.
+ * Set to `true` if the Tree View is editable.
*/
isTreeViewEditable: boolean;
}
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts
index aa115aed1549..d70f440eec26 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts
@@ -90,12 +90,12 @@ export interface UseTreeViewSelectionParameters,
) => void;
/**
- * Callback fired when a tree item is selected or deselected.
+ * Callback fired when a Tree Item is selected or deselected.
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
* @param {array} itemId The itemId of the modified item.
* @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts
index 674f7380b39f..54f210b799e5 100644
--- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts
+++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts
@@ -92,7 +92,7 @@ export const useTreeItem2 = <
// when we enter the editing state, we focus the input -> we don't want to remove the focused item from the state
if (
status.editing ||
- // we can exit the editing state by clicking outside the input (within the tree item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases
+ // we can exit the editing state by clicking outside the input (within the Tree Item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases
// we can also exit the editing state by clicking on the root itself -> want to remove the focused item from the state in this case
(event.relatedTarget &&
isTargetInDescendants(event.relatedTarget as HTMLElement, rootElement) &&
diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts
index 68080b4f4f73..a859514bd283 100644
--- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts
+++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts
@@ -201,7 +201,7 @@ export interface UseTreeItem2ReturnValue<
) => UseTreeItem2GroupTransitionSlotProps;
/**
* Resolver for the DragAndDropOverlay slot's props.
- * Warning: This slot is only useful when using the `RichTreeViewPro` component.
+ * Warning: This slot is only useful when using the `` component.
* @param {ExternalProps} externalProps Additional props for the DragAndDropOverlay slot.
* @returns {UseTreeItem2DragAndDropOverlaySlotProps} Props that should be spread on the DragAndDropOverlay slot.
*/
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7af41d44bba6..57785408e6f7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -90,11 +90,11 @@ importers:
specifier: 1.0.18
version: 1.0.18(@babel/core@7.25.8)
'@mui/internal-markdown':
- specifier: ^1.0.15
- version: 1.0.15
+ specifier: ^1.0.17
+ version: 1.0.17
'@mui/internal-test-utils':
- specifier: ^1.0.15
- version: 1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.0.17
+ version: 1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/material':
specifier: ^5.16.7
version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -429,8 +429,8 @@ importers:
specifier: ^11.13.0
version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1)
'@mui/docs':
- specifier: 6.1.2
- version: 6.1.2(ycp24r7hmgzk3bu34shnp2ejgu)
+ specifier: 6.1.4
+ version: 6.1.4(ycp24r7hmgzk3bu34shnp2ejgu)
'@mui/icons-material':
specifier: ^5.16.7
version: 5.16.7(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.4)(react@18.3.1)
@@ -649,8 +649,8 @@ importers:
specifier: ^1.0.14
version: 1.0.14
'@mui/internal-scripts':
- specifier: ^1.0.22
- version: 1.0.22
+ specifier: ^1.0.24
+ version: 1.0.24
'@types/chance':
specifier: ^1.1.6
version: 1.1.6
@@ -768,8 +768,8 @@ importers:
version: 18.3.1(react@18.3.1)
devDependencies:
'@mui/internal-test-utils':
- specifier: ^1.0.15
- version: 1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.0.17
+ version: 1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/material':
specifier: ^5.16.7
version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1012,8 +1012,8 @@ importers:
version: 5.1.1
devDependencies:
'@mui/internal-test-utils':
- specifier: ^1.0.15
- version: 1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.0.17
+ version: 1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/joy':
specifier: ^5.0.0-beta.48
version: 5.0.0-beta.48(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1124,8 +1124,8 @@ importers:
version: 5.1.1
devDependencies:
'@mui/internal-test-utils':
- specifier: ^1.0.15
- version: 1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.0.17
+ version: 1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/material':
specifier: ^5.16.7
version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1186,8 +1186,8 @@ importers:
version: 5.1.1
devDependencies:
'@mui/internal-test-utils':
- specifier: ^1.0.15
- version: 1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.0.17
+ version: 1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/material':
specifier: ^5.16.7
version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1239,8 +1239,8 @@ importers:
version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
devDependencies:
'@mui/internal-test-utils':
- specifier: ^1.0.15
- version: 1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.0.17
+ version: 1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/material':
specifier: ^5.16.7
version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1334,8 +1334,8 @@ importers:
version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
devDependencies:
'@mui/internal-test-utils':
- specifier: ^1.0.15
- version: 1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.0.17
+ version: 1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/material':
specifier: ^5.16.7
version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1381,8 +1381,8 @@ importers:
version: 18.3.1
devDependencies:
'@mui/internal-test-utils':
- specifier: ^1.0.15
- version: 1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.0.17
+ version: 1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rimraf:
specifier: ^6.0.1
version: 6.0.1
@@ -1401,8 +1401,8 @@ importers:
version: 18.3.1
devDependencies:
'@mui/internal-test-utils':
- specifier: ^1.0.15
- version: 1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.0.17
+ version: 1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rimraf:
specifier: ^6.0.1
version: 6.0.1
@@ -1445,8 +1445,8 @@ importers:
version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
devDependencies:
'@mui/internal-test-utils':
- specifier: ^1.0.15
- version: 1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.0.17
+ version: 1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/material':
specifier: ^5.16.7
version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1504,8 +1504,8 @@ importers:
version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
devDependencies:
'@mui/internal-test-utils':
- specifier: ^1.0.15
- version: 1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.0.17
+ version: 1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/material':
specifier: ^5.16.7
version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -3025,8 +3025,8 @@ packages:
'@mui/core-downloads-tracker@5.16.7':
resolution: {integrity: sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==}
- '@mui/docs@6.1.2':
- resolution: {integrity: sha512-/xR1vchUwkMUzECOilcQu4Sx8SoOoJ5AJ9H0jg+s5Jn/2IiYIr2WMx34Dg3dt9KGuvnOr08j2zEefwnxxRa95Q==}
+ '@mui/docs@6.1.4':
+ resolution: {integrity: sha512-pUMMy4Hxx1se+gG0stiX/ICphFfOx9RC3bKI4da11iUNVsSaUfYaCtiPc296BUbilaTMcQ82v8jYu+AOexHT3w==}
engines: {node: '>=14.0.0'}
peerDependencies:
'@mui/base': '*'
@@ -3061,14 +3061,14 @@ packages:
'@mui/internal-docs-utils@1.0.14':
resolution: {integrity: sha512-jb8RyzoGkV8zvTJndB4An95WCasbDwmDiTibw2YQaUh3+4XiAX3jS2XUB9ab3BxMv3TDCCywL5g0viB1bxQVBw==}
- '@mui/internal-markdown@1.0.15':
- resolution: {integrity: sha512-efFhzNpiTtzBJYe0looj5L36DQ+mQFWpycJfl7M4jm0VrpJhyNd8egQaaQyMFf6LzCzNQPKT7KuFoovGTOkB2w==}
+ '@mui/internal-markdown@1.0.17':
+ resolution: {integrity: sha512-sws1OTUvJxNZ04mTYgahB7Z35yWcAEzVQxqqnOB+tPgDL/iMLtMQXB6wEFbW77e/P3O6Y/XOe7FhHXnK46vYTQ==}
- '@mui/internal-scripts@1.0.22':
- resolution: {integrity: sha512-+GEmp73U9o2touhiMRNO+hv8AlYWwVpu6ZjKLnZ3OLoYq5kg0e2p8GMpHTBTmalNKXXM3kOchgs0NYoYJwsX4g==}
+ '@mui/internal-scripts@1.0.24':
+ resolution: {integrity: sha512-omDYril4RiR8PSmPWkja16BjNyGkcj7N9sK1Ul9pSVpKSw8LF4BUxLOkF5NzAfDxNQgoZp+7DJPWBm9c/hmC+A==}
- '@mui/internal-test-utils@1.0.15':
- resolution: {integrity: sha512-KRj5CTQ1EtUQ/9c6LuDl32g49saCrg2VxTwpuyGv064fSDTdvqzIe8LLssIG6MnPFqdGao/d10Oh4VVMryQ9/w==}
+ '@mui/internal-test-utils@1.0.17':
+ resolution: {integrity: sha512-tLOlGMIkDIUnExfl+3LoaV60PWniOjfv44C5gCVW6PDhg0O0P5T1E2vM1zvOwm4T7xM+6IKY9E5BKcEUsdpqaQ==}
peerDependencies:
react: ^18.2.0
react-dom: ^18.2.0
@@ -7580,8 +7580,8 @@ packages:
resolution: {integrity: sha512-wgp8yesWjFBL7bycA3hxwHRdsZGJhjhyP1dSxKVKrza0EPFYtn+mHtkVy6dvP1kGSjovyG5B8yNP6Frj0UFUJg==}
engines: {node: '>=18'}
- marked@13.0.3:
- resolution: {integrity: sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==}
+ marked@14.1.3:
+ resolution: {integrity: sha512-ZibJqTULGlt9g5k4VMARAktMAjXoVnnr+Y3aCqW1oDftcV4BA3UmrBifzXoZyenHRk75csiPu9iwsTj4VNBT0g==}
engines: {node: '>= 18'}
hasBin: true
@@ -11782,12 +11782,12 @@ snapshots:
'@mui/core-downloads-tracker@5.16.7': {}
- '@mui/docs@6.1.2(ycp24r7hmgzk3bu34shnp2ejgu)':
+ '@mui/docs@6.1.4(ycp24r7hmgzk3bu34shnp2ejgu)':
dependencies:
'@babel/runtime': 7.25.7
'@mui/base': 5.0.0-beta.40(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/icons-material': 5.16.7(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.4)(react@18.3.1)
- '@mui/internal-markdown': 1.0.15
+ '@mui/internal-markdown': 1.0.17
'@mui/material': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/system': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1)
chai: 5.1.1
@@ -11819,14 +11819,14 @@ snapshots:
rimraf: 6.0.1
typescript: 5.6.3
- '@mui/internal-markdown@1.0.15':
+ '@mui/internal-markdown@1.0.17':
dependencies:
'@babel/runtime': 7.25.7
lodash: 4.17.21
- marked: 13.0.3
+ marked: 14.1.3
prismjs: 1.29.0
- '@mui/internal-scripts@1.0.22':
+ '@mui/internal-scripts@1.0.24':
dependencies:
'@babel/core': 7.25.8
'@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.8)
@@ -11841,7 +11841,7 @@ snapshots:
transitivePeerDependencies:
- supports-color
- '@mui/internal-test-utils@1.0.15(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+ '@mui/internal-test-utils@1.0.17(@babel/core@7.25.8)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@babel/plugin-transform-modules-commonjs': 7.25.7(@babel/core@7.25.8)
'@babel/preset-typescript': 7.25.7(@babel/core@7.25.8)
@@ -17277,7 +17277,7 @@ snapshots:
markdown-it: 14.1.0
markdownlint-micromark: 0.1.10
- marked@13.0.3: {}
+ marked@14.1.3: {}
mdast-util-from-markdown@2.0.1:
dependencies:
diff --git a/scripts/useMaterialUIv6.mjs b/scripts/useMaterialUIv6.mjs
index d6d0c4b4966a..07f2aed4e3ab 100644
--- a/scripts/useMaterialUIv6.mjs
+++ b/scripts/useMaterialUIv6.mjs
@@ -2,7 +2,14 @@ import childProcess from 'child_process';
const pnpmUpdate = childProcess.spawnSync(
'pnpm',
- ['update', '-r', '@mui/material@6.x', '@mui/system@6.x', '@mui/icons-material@6.x'],
+ [
+ 'update',
+ '-r',
+ '@mui/material@6.x',
+ '@mui/system@6.x',
+ '@mui/icons-material@6.x',
+ '@mui/utils@6.x',
+ ],
{
shell: true,
stdio: ['inherit', 'inherit', 'inherit'],
diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json
index 76ba9bd6182d..5c536da99e51 100644
--- a/scripts/x-data-grid-premium.exports.json
+++ b/scripts/x-data-grid-premium.exports.json
@@ -401,6 +401,7 @@
{ "name": "GridKeyValue", "kind": "TypeAlias" },
{ "name": "GridLeafColumn", "kind": "Interface" },
{ "name": "GridLeafNode", "kind": "Interface" },
+ { "name": "GridListColDef", "kind": "TypeAlias" },
{ "name": "GridLoadIcon", "kind": "Variable" },
{ "name": "GridLoadingOverlay", "kind": "Variable" },
{ "name": "GridLoadingOverlayProps", "kind": "Interface" },
diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
index d5e14c148c83..dcb194f6eac7 100644
--- a/scripts/x-data-grid-pro.exports.json
+++ b/scripts/x-data-grid-pro.exports.json
@@ -364,6 +364,7 @@
{ "name": "GridKeyValue", "kind": "TypeAlias" },
{ "name": "GridLeafColumn", "kind": "Interface" },
{ "name": "GridLeafNode", "kind": "Interface" },
+ { "name": "GridListColDef", "kind": "TypeAlias" },
{ "name": "GridLoadIcon", "kind": "Variable" },
{ "name": "GridLoadingOverlay", "kind": "Variable" },
{ "name": "GridLoadingOverlayProps", "kind": "Interface" },
diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
index b77a45869881..cc85a19301e4 100644
--- a/scripts/x-data-grid.exports.json
+++ b/scripts/x-data-grid.exports.json
@@ -326,6 +326,7 @@
{ "name": "GridKeyValue", "kind": "TypeAlias" },
{ "name": "GridLeafColumn", "kind": "Interface" },
{ "name": "GridLeafNode", "kind": "Interface" },
+ { "name": "GridListColDef", "kind": "TypeAlias" },
{ "name": "GridLoadIcon", "kind": "Variable" },
{ "name": "GridLoadingOverlay", "kind": "Variable" },
{ "name": "GridLoadingOverlayProps", "kind": "Interface" },
diff --git a/test/utils/pickers/openPicker.ts b/test/utils/pickers/openPicker.ts
index 229510842e61..b34715ce5f8b 100644
--- a/test/utils/pickers/openPicker.ts
+++ b/test/utils/pickers/openPicker.ts
@@ -6,7 +6,6 @@ export type OpenPickerParams =
| {
type: 'date' | 'date-time' | 'time';
variant: 'mobile' | 'desktop';
- click?: (element: Element) => Promise;
}
| {
type: 'date-range' | 'date-time-range';
@@ -16,32 +15,29 @@ export type OpenPickerParams =
* @default false
*/
isSingleInput?: boolean;
- click?: (element: Element) => Promise;
};
-export const openPicker = async (params: OpenPickerParams) => {
+export const openPicker = (params: OpenPickerParams) => {
const isRangeType = params.type === 'date-range' || params.type === 'date-time-range';
const fieldSectionsContainer = getFieldSectionsContainer(
isRangeType && !params.isSingleInput && params.initialFocus === 'end' ? 1 : 0,
);
- const { click = fireEvent.click } = params;
-
if (isRangeType) {
- await click(fieldSectionsContainer);
+ fireEvent.click(fieldSectionsContainer);
if (params.isSingleInput && params.initialFocus === 'end') {
const sections = fieldSectionsContainer.querySelectorAll(
`.${pickersInputBaseClasses.sectionsContainer}`,
);
- await click(sections[sections.length - 1]);
+ fireEvent.click(sections[sections.length - 1]);
}
return true;
}
if (params.variant === 'mobile') {
- await click(fieldSectionsContainer);
+ fireEvent.click(fieldSectionsContainer);
return true;
}
@@ -51,6 +47,6 @@ export const openPicker = async (params: OpenPickerParams) => {
? screen.getByLabelText(/choose time/i)
: screen.getByLabelText(/choose date/i);
- await click(target);
+ fireEvent.click(target);
return true;
};
diff --git a/test/utils/tree-view/describeTreeView/describeTreeView.tsx b/test/utils/tree-view/describeTreeView/describeTreeView.tsx
index ce3368a259da..8063e32ad330 100644
--- a/test/utils/tree-view/describeTreeView/describeTreeView.tsx
+++ b/test/utils/tree-view/describeTreeView/describeTreeView.tsx
@@ -325,7 +325,7 @@ type DescribeTreeView = {
* ```
*
* Several things to note:
- * - The `render` function takes an array of items, even for `SimpleTreeView`
+ * - The `render` function takes an array of items, even for Simple Tree View
* - Except for `items`, all the other properties passed to `render` will be forwarded to the Tree View as props
* - If an item has no label, its `id` will be used as the label
*/