Get started with the MUI X Charts components. Install the package, configure your application, and start using the components.
+Install the MUI X Charts package to start building React data visualization components.
## Installation -Using your favorite package manager, install `@mui/x-charts-pro` for the commercial version, or `@mui/x-charts` for the free community version. +Run one of the following commands to install the free Community version or the paid Pro version of the MUI X Charts: {{"component": "modules/components/ChartsInstallationInstructions.js"}} -The Charts package has a peer dependency on `@mui/material`. -If you are not already using it in your project, you can install it with: +The Charts packages have a peer dependency on `@mui/material`. +If you're not already using it, install it with the following command:A fast and extendable library of react chart components for data visualization.
+A collection of React chart components for data visualization.
{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Overview -The `@mui/x-charts` is an MIT library for rendering charts relying on [D3.js](https://d3js.org/) for data manipulation and SVG for rendering. -And, like other MUI X components, charts are production-ready components that integrate smoothly into your app. +MUI X Charts is a library of production-ready components for rendering charts with React. +It uses [D3.js](https://d3js.org/) for data manipulation and SVGs for rendering. -With a high level of customization, MUI X Charts provides three levels of customization layers: **single components** with great defaults, extensive **configuration props**, and **subcomponents** for flexible composition. -Additionally, you can also use all the [MUI System](https://mui.com/system/getting-started/) tools, such as the theme override or the `sx` prop. +The components provide a high level of customization, with beautiful defaults as well as extensive configuration props and flexible composition options. +They also have access to all [MUI System](https://mui.com/system/getting-started/) tools such as theme overrides and the `sx` prop. {{"demo": "ChartsOverviewDemo.js", "defaultCodeOpen": true}} -## Using the documentation +## All MUI X Charts -The MUI X Charts documentation has a slightly different structure than other MUI X components. -Instead of having a long page for each, the pages are divided in two: +{{"component": "modules/components/ChartComponentsGrid.js"}} -1. General description of the built-in features the component provides. -2. A set of examples demonstrating the component with customizations. +## Using this documentation -## All MUI X Charts components +Each Chart type has two accompanying documents: -{{"component": "modules/components/ChartComponentsGrid.js"}} +1. **Overview** – a general description of built-in features +2. **Demo** – a collection of custom examples ## Supported features -The features that are shared across multiple Charts components, such as axes and legends, are also documented on separate pages. +Features shared across Chart components such as axes and legends are described in standalone documents: {{"component": "modules/components/ChartFeaturesGrid.js"}} diff --git a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.js b/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.js index d8382e0a39c5c..22fa253558c6f 100644 --- a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.js +++ b/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.js @@ -13,7 +13,7 @@ const sizing = { margin: { right: 5 }, width: 200, height: 200, - legend: { hidden: true }, + slotProps: { legend: { hidden: true } }, }; const TOTAL = data.map((item) => item.value).reduce((a, b) => a + b, 0); diff --git a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx b/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx index 9610b494dcd60..2c833f776c53f 100644 --- a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx +++ b/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx @@ -13,7 +13,7 @@ const sizing = { margin: { right: 5 }, width: 200, height: 200, - legend: { hidden: true }, + slotProps: { legend: { hidden: true } }, }; const TOTAL = data.map((item) => item.value).reduce((a, b) => a + b, 0); diff --git a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js b/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js index f0606ec0e296c..de23607e92600 100644 --- a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js +++ b/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js @@ -24,7 +24,7 @@ export default function PieChartWithPaddingAngle() { margin={{ right: 5 }} width={200} height={200} - legend={{ hidden: true }} + slotProps={{ legend: { hidden: true } }} /> {
+ const svgRef = useSvgRef();
+ const popperRef: PopperProps['popperRef'] = React.useRef(null);
+ const positionRef = React.useRef({ x: 0, y: 0 });
+
+ // Use a ref to avoid rerendering on every mousemove event.
+ const [pointer, setPointer] = React.useState({
+ isActive: false,
+ isMousePointer: false,
+ pointerHeight: 0,
+ });
+
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleOut = (event: PointerEvent) => {
+ if (event.pointerType !== 'mouse') {
+ setPointer((prev) => ({
+ ...prev,
+ isActive: false,
+ }));
+ }
+ };
+
+ const handleEnter = (event: PointerEvent) => {
+ setPointer({
+ isActive: true,
+ isMousePointer: event.pointerType === 'mouse',
+ pointerHeight: event.height,
+ });
+ };
+
+ const handleMove = (event: PointerEvent) => {
+ positionRef.current = {
+ x: event.clientX,
+ y: event.clientY,
+ };
+ popperRef.current?.update();
+ };
+
+ element.addEventListener('pointerenter', handleEnter);
+ element.addEventListener('pointerup', handleOut);
+ element.addEventListener('pointermove', handleMove);
+
+ return () => {
+ element.removeEventListener('pointerenter', handleEnter);
+ element.removeEventListener('pointerup', handleOut);
+ element.removeEventListener('pointermove', handleMove);
+ };
+ }, [svgRef]);
+
+ return {
+ ...pointer,
+ popperRef,
+ anchorEl: {
+ getBoundingClientRect: () => ({
+ x: positionRef.current.x,
+ y: positionRef.current.y,
+ top: positionRef.current.y,
+ left: positionRef.current.x,
+ right: positionRef.current.x,
+ bottom: positionRef.current.y,
+ width: 0,
+ height: 0,
+ toJSON: () => '',
+ }),
+ },
+ };
+}
export function CustomAxisTooltip() {
const tooltipData = useAxisTooltip();
- const mousePosition = useMouseTracker(); // Track the mouse position on chart.
+ const { isActive, isMousePointer, pointerHeight, popperRef, anchorEl } =
+ usePointer();
- if (!tooltipData || !mousePosition) {
+ if (!tooltipData || !isActive) {
// No data to display
return null;
}
// The pointer type can be used to have different behavior based on pointer type.
- const isMousePointer = mousePosition?.pointerType === 'mouse';
// Adapt the tooltip offset to the size of the pointer.
- const yOffset = isMousePointer ? 0 : 40 - mousePosition.height;
+ const yOffset = isMousePointer ? 0 : 40 - pointerHeight;
return (
@@ -29,7 +108,8 @@ export function CustomAxisTooltip() {
}}
open
placement={isMousePointer ? 'top-end' : 'top'}
- anchorEl={generateVirtualElement(mousePosition)}
+ anchorEl={anchorEl}
+ popperRef={popperRef}
modifiers={[
{
name: 'offset',
@@ -81,7 +161,7 @@ export function CustomAxisTooltip() {
{tooltipData.seriesItems.map((seriesItem) => (
-
+
```
-- **object**, the `value` and `label` keys will be used respectively for the value and label of the option.
+- **object**, the `value` and `label` keys will be used respectively for the value and label of the option. Define `value` as `-1` to display all results.
```jsx
-
+
```
{{"demo": "PageSizeCustomOptions.js", "bg": "inline"}}
diff --git a/docs/data/data-grid/row-grouping/RowGroupingFullExample.js b/docs/data/data-grid/row-grouping/RowGroupingFullExample.js
index d1a08e3ff0624..52040b1639af1 100644
--- a/docs/data/data-grid/row-grouping/RowGroupingFullExample.js
+++ b/docs/data/data-grid/row-grouping/RowGroupingFullExample.js
@@ -1,6 +1,7 @@
import * as React from 'react';
import {
DataGridPremium,
+ GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
useGridApiRef,
useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
@@ -23,7 +24,7 @@ export default function RowGroupingFullExample() {
model: ['commodity'],
},
sorting: {
- sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
+ sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'asc' }],
},
},
});
diff --git a/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx b/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx
index d1a08e3ff0624..52040b1639af1 100644
--- a/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx
+++ b/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import {
DataGridPremium,
+ GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
useGridApiRef,
useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
@@ -23,7 +24,7 @@ export default function RowGroupingFullExample() {
model: ['commodity'],
},
sorting: {
- sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
+ sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'asc' }],
},
},
});
diff --git a/docs/data/data-grid/row-grouping/row-grouping.md b/docs/data/data-grid/row-grouping/row-grouping.md
index b70899fb38b47..13f56a2ebac88 100644
--- a/docs/data/data-grid/row-grouping/row-grouping.md
+++ b/docs/data/data-grid/row-grouping/row-grouping.md
@@ -11,6 +11,10 @@ In the following example, movies are grouped based on their production `company`
{{"demo": "RowGroupingBasicExample.js", "bg": "inline", "defaultCodeOpen": false}}
+:::info
+If you are looking for row grouping on the server-side, see [server-side row grouping](/x/react-data-grid/server-side-data/row-grouping/).
+:::
+
## Grouping criteria
### Initialize the row grouping
@@ -252,6 +256,10 @@ Use the `setRowChildrenExpansion` method on `apiRef` to programmatically set the
{{"demo": "RowGroupingSetChildrenExpansion.js", "bg": "inline", "defaultCodeOpen": false}}
+:::warning
+The `apiRef.current.setRowChildrenExpansion` method is not compatible with the [server-side tree data](/x/react-data-grid/server-side-data/tree-data/) and [server-side row grouping](/x/react-data-grid/server-side-data/row-grouping/). Use `apiRef.current.unstable_dataSource.fetchRows` instead.
+:::
+
### Customize grouping cell indent
To change the default cell indent, you can use the `--DataGrid-cellOffsetMultiplier` CSS variable:
@@ -280,10 +288,6 @@ If you are rendering leaves with the `leafField` property of `groupingColDef`, t
You can force the filtering to be applied on another grouping criteria with the `mainGroupingCriteria` property of `groupingColDef`
-:::warning
-This feature is not yet compatible with `sortingMode = "server"` and `filteringMode = "server"`.
-:::
-
{{"demo": "RowGroupingFilteringSingleGroupingColDef.js", "bg": "inline", "defaultCodeOpen": false}}
### Multiple grouping columns
@@ -376,6 +380,10 @@ const rows = apiRef.current.getRowGroupChildren({
{{"demo": "RowGroupingGetRowGroupChildren.js", "bg": "inline", "defaultCodeOpen": false}}
+:::warning
+The `apiRef.current.getRowGroupChildren` method is not compatible with the [server-side row grouping](/x/react-data-grid/server-side-data/row-grouping/) since all the rows might not be available to get at a given instance.
+:::
+
## Row group panel 🚧
:::warning
diff --git a/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.js b/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.js
new file mode 100644
index 0000000000000..3c9bdfd9c37ee
--- /dev/null
+++ b/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.js
@@ -0,0 +1,194 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
+import {
+ randomCreatedDate,
+ randomPrice,
+ randomCurrency,
+ randomCountry,
+ randomCity,
+ randomEmail,
+ randomInt,
+ randomAddress,
+ randomCommodity,
+} from '@mui/x-data-grid-generator';
+
+function DetailPanelContent({ row: rowProp }) {
+ return (
+
+
+
+ {`Order #${rowProp.id}`}
+
+
+
+ Customer information
+
+ {rowProp.customer}
+ {rowProp.email}
+
+
+
+ Shipping address
+
+
+ {rowProp.address}
+
+
+ {`${rowProp.city}, ${rowProp.country.label}`}
+
+
+
+ row.quantity * row.unitPrice,
+ },
+ ]}
+ rows={rowProp.products}
+ sx={{ flex: 1 }}
+ hideFooter
+ />
+
+
+
+ );
+}
+
+const columns = [
+ { field: 'id', headerName: 'Order ID' },
+ { field: 'customer', headerName: 'Customer', width: 200 },
+ { field: 'date', type: 'date', headerName: 'Placed at' },
+ { field: 'currency', headerName: 'Currency' },
+ {
+ field: 'total',
+ type: 'number',
+ headerName: 'Total',
+ valueGetter: (value, row) => {
+ const subtotal = row.products.reduce(
+ (acc, product) => product.unitPrice * product.quantity,
+ 0,
+ );
+ const taxes = subtotal * 0.05;
+ return subtotal + taxes;
+ },
+ },
+];
+
+function generateProducts() {
+ const quantity = randomInt(1, 5);
+ return [...Array(quantity)].map((_, index) => ({
+ id: index,
+ name: randomCommodity(),
+ quantity: randomInt(1, 5),
+ unitPrice: randomPrice(1, 1000),
+ }));
+}
+
+const rows = [
+ {
+ id: 1,
+ customer: 'Matheus',
+ email: randomEmail(),
+ date: randomCreatedDate(),
+ address: randomAddress(),
+ country: randomCountry(),
+ city: randomCity(),
+ currency: randomCurrency(),
+ products: generateProducts(),
+ },
+ {
+ id: 2,
+ customer: 'Olivier',
+ email: randomEmail(),
+ date: randomCreatedDate(),
+ address: randomAddress(),
+ country: randomCountry(),
+ city: randomCity(),
+ currency: randomCurrency(),
+ products: generateProducts(),
+ },
+ {
+ id: 3,
+ customer: 'Flavien',
+ email: randomEmail(),
+ date: randomCreatedDate(),
+ address: randomAddress(),
+ country: randomCountry(),
+ city: randomCity(),
+ currency: randomCurrency(),
+ products: generateProducts(),
+ },
+ {
+ id: 4,
+ customer: 'Danail',
+ email: randomEmail(),
+ date: randomCreatedDate(),
+ address: randomAddress(),
+ country: randomCountry(),
+ city: randomCity(),
+ currency: randomCurrency(),
+ products: generateProducts(),
+ },
+ {
+ id: 5,
+ customer: 'Alexandre',
+ email: randomEmail(),
+ date: randomCreatedDate(),
+ address: randomAddress(),
+ country: randomCountry(),
+ city: randomCity(),
+ currency: randomCurrency(),
+ products: generateProducts(),
+ },
+];
+
+export default function DetailPanelExpandOnRowClick() {
+ const getDetailPanelContent = React.useCallback(
+ ({ row }) =>
+
+ );
+}
diff --git a/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.tsx b/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.tsx
new file mode 100644
index 0000000000000..dc5df4e819e97
--- /dev/null
+++ b/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.tsx
@@ -0,0 +1,202 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import {
+ DataGridPro,
+ DataGridProProps,
+ GridColDef,
+ GridEventListener,
+ useGridApiRef,
+} from '@mui/x-data-grid-pro';
+import {
+ randomCreatedDate,
+ randomPrice,
+ randomCurrency,
+ randomCountry,
+ randomCity,
+ randomEmail,
+ randomInt,
+ randomAddress,
+ randomCommodity,
+} from '@mui/x-data-grid-generator';
+
+function DetailPanelContent({ row: rowProp }: { row: Customer }) {
+ return (
+
+
+
+ {`Order #${rowProp.id}`}
+
+
+
+ Customer information
+
+ {rowProp.customer}
+ {rowProp.email}
+
+
+
+ Shipping address
+
+
+ {rowProp.address}
+
+ {`${rowProp.city}, ${rowProp.country.label}`}
+
+
+ row.quantity * row.unitPrice,
+ },
+ ]}
+ rows={rowProp.products}
+ sx={{ flex: 1 }}
+ hideFooter
+ />
+
+
+
+ );
+}
+
+const columns: GridColDef<(typeof rows)[number]>[] = [
+ { field: 'id', headerName: 'Order ID' },
+ { field: 'customer', headerName: 'Customer', width: 200 },
+ { field: 'date', type: 'date', headerName: 'Placed at' },
+ { field: 'currency', headerName: 'Currency' },
+ {
+ field: 'total',
+ type: 'number',
+ headerName: 'Total',
+ valueGetter: (value, row) => {
+ const subtotal = row.products.reduce(
+ (acc: number, product: any) => product.unitPrice * product.quantity,
+ 0,
+ );
+ const taxes = subtotal * 0.05;
+ return subtotal + taxes;
+ },
+ },
+];
+
+function generateProducts() {
+ const quantity = randomInt(1, 5);
+ return [...Array(quantity)].map((_, index) => ({
+ id: index,
+ name: randomCommodity(),
+ quantity: randomInt(1, 5),
+ unitPrice: randomPrice(1, 1000),
+ }));
+}
+
+const rows = [
+ {
+ id: 1,
+ customer: 'Matheus',
+ email: randomEmail(),
+ date: randomCreatedDate(),
+ address: randomAddress(),
+ country: randomCountry(),
+ city: randomCity(),
+ currency: randomCurrency(),
+ products: generateProducts(),
+ },
+ {
+ id: 2,
+ customer: 'Olivier',
+ email: randomEmail(),
+ date: randomCreatedDate(),
+ address: randomAddress(),
+ country: randomCountry(),
+ city: randomCity(),
+ currency: randomCurrency(),
+ products: generateProducts(),
+ },
+ {
+ id: 3,
+ customer: 'Flavien',
+ email: randomEmail(),
+ date: randomCreatedDate(),
+ address: randomAddress(),
+ country: randomCountry(),
+ city: randomCity(),
+ currency: randomCurrency(),
+ products: generateProducts(),
+ },
+ {
+ id: 4,
+ customer: 'Danail',
+ email: randomEmail(),
+ date: randomCreatedDate(),
+ address: randomAddress(),
+ country: randomCountry(),
+ city: randomCity(),
+ currency: randomCurrency(),
+ products: generateProducts(),
+ },
+ {
+ id: 5,
+ customer: 'Alexandre',
+ email: randomEmail(),
+ date: randomCreatedDate(),
+ address: randomAddress(),
+ country: randomCountry(),
+ city: randomCity(),
+ currency: randomCurrency(),
+ products: generateProducts(),
+ },
+];
+
+type Customer = (typeof rows)[number];
+
+export default function DetailPanelExpandOnRowClick() {
+ const getDetailPanelContent = React.useCallback<
+ NonNullable
+ >(({ row }) => >(
+ (params) => {
+ apiRef.current.toggleDetailPanel(params.id);
+ },
+ [apiRef],
+ );
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.tsx.preview b/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.tsx.preview
new file mode 100644
index 0000000000000..db3ecef167cfa
--- /dev/null
+++ b/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.tsx.preview
@@ -0,0 +1,8 @@
+{error} ;
+}
diff --git a/docs/data/data-grid/server-side-data/ServerSideRowGroupingErrorHandling.tsx b/docs/data/data-grid/server-side-data/ServerSideRowGroupingErrorHandling.tsx
new file mode 100644
index 0000000000000..621b74b052f4a
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/ServerSideRowGroupingErrorHandling.tsx
@@ -0,0 +1,138 @@
+import * as React from 'react';
+import {
+ DataGridPremium,
+ GridDataSource,
+ useGridApiRef,
+ useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+import Snackbar from '@mui/material/Snackbar';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { alpha, styled, darken, lighten, Theme } from '@mui/material/styles';
+
+export default function ServerSideRowGroupingErrorHandling() {
+ const apiRef = useGridApiRef();
+ const [rootError, setRootError] = React.useState();
+ const [childrenError, setChildrenError] = React.useState();
+ const [shouldRequestsFail, setShouldRequestsFail] = React.useState(false);
+
+ const { fetchRows, columns } = useMockServer(
+ {
+ rowGrouping: true,
+ },
+ {},
+ shouldRequestsFail,
+ );
+
+ const dataSource: GridDataSource = React.useMemo(() => {
+ return {
+ getRows: async (params) => {
+ const urlParams = new URLSearchParams({
+ paginationModel: JSON.stringify(params.paginationModel),
+ filterModel: JSON.stringify(params.filterModel),
+ sortModel: JSON.stringify(params.sortModel),
+ groupKeys: JSON.stringify(params.groupKeys),
+ groupFields: JSON.stringify(params.groupFields),
+ });
+ const getRowsResponse = await fetchRows(
+ `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+ );
+ return {
+ rows: getRowsResponse.rows,
+ rowCount: getRowsResponse.rowCount,
+ };
+ },
+ getGroupKey: (row) => row.group,
+ getChildrenCount: (row) => row.descendantCount,
+ };
+ }, [fetchRows]);
+
+ const initialState = useKeepGroupedColumnsHidden({
+ apiRef,
+ initialState: {
+ rowGrouping: {
+ model: ['company', 'director'],
+ },
+ },
+ });
+
+ return (
+ {error} ;
+}
diff --git a/docs/data/data-grid/server-side-data/ServerSideRowGroupingFullDataGrid.js b/docs/data/data-grid/server-side-data/ServerSideRowGroupingFullDataGrid.js
new file mode 100644
index 0000000000000..7db1ea09c9c37
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/ServerSideRowGroupingFullDataGrid.js
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import {
+ DataGridPremium,
+ useGridApiRef,
+ useKeepGroupedColumnsHidden,
+ GridToolbar,
+} from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+import Button from '@mui/material/Button';
+
+export default function ServerSideRowGroupingFullDataGrid() {
+ const apiRef = useGridApiRef();
+
+ const { fetchRows, columns, loadNewData } = useMockServer({
+ rowGrouping: true,
+ rowLength: 1000,
+ dataSet: 'Commodity',
+ maxColumns: 20,
+ });
+
+ const dataSource = React.useMemo(() => {
+ return {
+ getRows: async (params) => {
+ const urlParams = new URLSearchParams({
+ paginationModel: JSON.stringify(params.paginationModel),
+ filterModel: JSON.stringify(params.filterModel),
+ sortModel: JSON.stringify(params.sortModel),
+ groupKeys: JSON.stringify(params.groupKeys),
+ groupFields: JSON.stringify(params.groupFields),
+ });
+ const getRowsResponse = await fetchRows(
+ `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+ );
+ return {
+ rows: getRowsResponse.rows,
+ rowCount: getRowsResponse.rowCount,
+ };
+ },
+ getGroupKey: (row) => row.group,
+ getChildrenCount: (row) => row.descendantCount,
+ };
+ }, [fetchRows]);
+
+ const initialState = useKeepGroupedColumnsHidden({
+ apiRef,
+ initialState: {
+ rowGrouping: {
+ model: ['commodity', 'status'],
+ },
+ columns: {
+ columnVisibilityModel: {
+ id: false,
+ },
+ },
+ },
+ });
+
+ return (
+
- {startAdornment}
-
- {endAdornment}
-
- );
-});
-
-const BrowserDateField = React.forwardRef((props, ref) => {
- const { slots, slotProps, ...textFieldProps } = props;
-
- const fieldResponse = useDateField({
- ...textFieldProps,
- enableAccessibleFieldDOMStructure: false,
- });
-
- /* If you don't need a clear button, you can skip the use of this hook */
- const processedFieldProps = useClearableField({
- ...fieldResponse,
- slots,
- slotProps,
- });
-
- return
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/BrowserV6Field.tsx b/docs/data/date-pickers/custom-field/BrowserV6Field.tsx
deleted file mode 100644
index 49138cd42863e..0000000000000
--- a/docs/data/date-pickers/custom-field/BrowserV6Field.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import Box from '@mui/material/Box';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker';
-import {
- unstable_useDateField as useDateField,
- UseDateFieldProps,
-} from '@mui/x-date-pickers/DateField';
-import { useClearableField } from '@mui/x-date-pickers/hooks';
-import {
- BaseSingleInputFieldProps,
- DateValidationError,
- FieldSection,
-} from '@mui/x-date-pickers/models';
-
-interface BrowserFieldProps
- extends Omit, 'size'> {
- label?: React.ReactNode;
- inputRef?: React.Ref;
- InputProps?: {
- ref?: React.Ref;
- endAdornment?: React.ReactNode;
- startAdornment?: React.ReactNode;
- };
- error?: boolean;
- focused?: boolean;
- ownerState?: any;
- sx?: any;
- enableAccessibleFieldDOMStructure: boolean;
-}
-
-type BrowserFieldComponent = ((
- props: BrowserFieldProps & React.RefAttributes,
-) => React.JSX.Element) & { propTypes?: any };
-
-const BrowserField = React.forwardRef(
- (props: BrowserFieldProps, ref: React.Ref) => {
- const {
- // Should be ignored
- enableAccessibleFieldDOMStructure,
-
- disabled,
- id,
- label,
- inputRef,
- InputProps: { ref: containerRef, startAdornment, endAdornment } = {},
- // extracting `error`, 'focused', and `ownerState` as `input` does not support those props
- error,
- focused,
- ownerState,
- sx,
- ...other
- } = props;
-
- const handleRef = useForkRef(containerRef, ref);
-
- return (
-
- {startAdornment}
-
- {endAdornment}
-
- );
- },
-) as BrowserFieldComponent;
-
-interface BrowserDateFieldProps
- extends UseDateFieldProps,
- BaseSingleInputFieldProps<
- Dayjs | null,
- Dayjs,
- FieldSection,
- false,
- DateValidationError
- > {}
-
-const BrowserDateField = React.forwardRef(
- (props: BrowserDateFieldProps, ref: React.Ref) => {
- const { slots, slotProps, ...textFieldProps } = props;
-
- const fieldResponse = useDateField({
- ...textFieldProps,
- enableAccessibleFieldDOMStructure: false,
- });
-
- /* If you don't need a clear button, you can skip the use of this hook */
- const processedFieldProps = useClearableField({
- ...fieldResponse,
- slots,
- slotProps,
- });
-
- return , ref: React.Ref) => {
- return (
-
- ref={ref}
- {...props}
- slots={{ ...props.slots, field: BrowserDateField }}
- />
- );
- },
-);
-
-export default function BrowserV6Field() {
- return (
-
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/BrowserV6Field.tsx.preview b/docs/data/date-pickers/custom-field/BrowserV6Field.tsx.preview
deleted file mode 100644
index 0bb9e399d3cb4..0000000000000
--- a/docs/data/date-pickers/custom-field/BrowserV6Field.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
- {startAdornment}
-
- {endAdornment}
-
- );
-});
-
-const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
- const {
- slotProps,
- value,
- defaultValue,
- format,
- onChange,
- readOnly,
- disabled,
- onError,
- shouldDisableDate,
- minDate,
- maxDate,
- disableFuture,
- disablePast,
- selectedSections,
- onSelectedSectionsChange,
- className,
- unstableStartFieldRef,
- unstableEndFieldRef,
- } = props;
-
- const startTextFieldProps = useSlotProps({
- elementType: 'input',
- externalSlotProps: slotProps?.textField,
- ownerState: { ...props, position: 'start' },
- });
-
- const endTextFieldProps = useSlotProps({
- elementType: 'input',
- externalSlotProps: slotProps?.textField,
- ownerState: { ...props, position: 'end' },
- });
-
- const fieldResponse = useMultiInputDateRangeField({
- sharedProps: {
- value,
- defaultValue,
- format,
- onChange,
- readOnly,
- disabled,
- onError,
- shouldDisableDate,
- minDate,
- maxDate,
- disableFuture,
- disablePast,
- selectedSections,
- onSelectedSectionsChange,
- enableAccessibleFieldDOMStructure: false,
- },
- startTextFieldProps,
- endTextFieldProps,
- unstableStartFieldRef,
- unstableEndFieldRef,
- });
-
- return (
-
-
- );
-});
-
-const BrowserDateRangePicker = React.forwardRef((props, ref) => {
- return (
-
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx
deleted file mode 100644
index b52029d14cde9..0000000000000
--- a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import useSlotProps from '@mui/utils/useSlotProps';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import {
- DateRangePicker,
- DateRangePickerProps,
-} from '@mui/x-date-pickers-pro/DateRangePicker';
-import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
-import {
- BaseMultiInputFieldProps,
- DateRange,
- DateRangeValidationError,
- MultiInputFieldSlotTextFieldProps,
- RangeFieldSection,
- UseDateRangeFieldProps,
-} from '@mui/x-date-pickers-pro/models';
-
-interface BrowserFieldProps
- extends Omit, 'size'> {
- label?: React.ReactNode;
- inputRef?: React.Ref;
- InputProps?: {
- ref?: React.Ref;
- endAdornment?: React.ReactNode;
- startAdornment?: React.ReactNode;
- };
- error?: boolean;
- focused?: boolean;
- ownerState?: any;
- sx?: any;
- enableAccessibleFieldDOMStructure: boolean;
-}
-
-type BrowserFieldComponent = ((
- props: BrowserFieldProps & React.RefAttributes,
-) => React.JSX.Element) & { propTypes?: any };
-
-const BrowserField = React.forwardRef(
- (props: BrowserFieldProps, ref: React.Ref) => {
- const {
- // Should be ignored
- enableAccessibleFieldDOMStructure,
-
- disabled,
- id,
- label,
- inputRef,
- InputProps: { ref: containerRef, startAdornment, endAdornment } = {},
- // extracting `error`, 'focused', and `ownerState` as `input` does not support those props
- error,
- focused,
- ownerState,
- sx,
- ...other
- } = props;
-
- const handleRef = useForkRef(containerRef, ref);
-
- return (
-
- {startAdornment}
-
- {endAdornment}
-
- );
- },
-) as BrowserFieldComponent;
-
-interface BrowserMultiInputDateRangeFieldProps
- extends UseDateRangeFieldProps,
- BaseMultiInputFieldProps<
- DateRange,
- Dayjs,
- RangeFieldSection,
- false,
- DateRangeValidationError
- > {}
-
-type BrowserMultiInputDateRangeFieldComponent = ((
- props: BrowserMultiInputDateRangeFieldProps & React.RefAttributes,
-) => React.JSX.Element) & { propTypes?: any };
-
-const BrowserMultiInputDateRangeField = React.forwardRef(
- (props: BrowserMultiInputDateRangeFieldProps, ref: React.Ref) => {
- const {
- slotProps,
- value,
- defaultValue,
- format,
- onChange,
- readOnly,
- disabled,
- onError,
- shouldDisableDate,
- minDate,
- maxDate,
- disableFuture,
- disablePast,
- selectedSections,
- onSelectedSectionsChange,
- className,
- unstableStartFieldRef,
- unstableEndFieldRef,
- } = props;
-
- const startTextFieldProps = useSlotProps({
- elementType: 'input',
- externalSlotProps: slotProps?.textField,
- ownerState: { ...props, position: 'start' },
- }) as MultiInputFieldSlotTextFieldProps;
-
- const endTextFieldProps = useSlotProps({
- elementType: 'input',
- externalSlotProps: slotProps?.textField,
- ownerState: { ...props, position: 'end' },
- }) as MultiInputFieldSlotTextFieldProps;
-
- const fieldResponse = useMultiInputDateRangeField<
- Dayjs,
- false,
- MultiInputFieldSlotTextFieldProps
- >({
- sharedProps: {
- value,
- defaultValue,
- format,
- onChange,
- readOnly,
- disabled,
- onError,
- shouldDisableDate,
- minDate,
- maxDate,
- disableFuture,
- disablePast,
- selectedSections,
- onSelectedSectionsChange,
- enableAccessibleFieldDOMStructure: false,
- },
- startTextFieldProps,
- endTextFieldProps,
- unstableStartFieldRef,
- unstableEndFieldRef,
- });
-
- return (
-
-
- );
- },
-) as BrowserMultiInputDateRangeFieldComponent;
-
-const BrowserDateRangePicker = React.forwardRef(
- (props: DateRangePickerProps, ref: React.Ref) => {
- return (
-
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx.preview b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx.preview
deleted file mode 100644
index d797406fa9997..0000000000000
--- a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
- {startAdornment}
-
- {endAdornment}
-
- );
-});
-
-const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
- const { slots, slotProps, onAdornmentClick, ...other } = props;
-
- const textFieldProps = useSlotProps({
- elementType: 'input',
- externalSlotProps: slotProps?.textField,
- externalForwardedProps: other,
- ownerState: props,
- });
-
- textFieldProps.InputProps = {
- ...textFieldProps.InputProps,
- endAdornment: (
-
-
-
-
- ),
- };
-
- const fieldResponse = useSingleInputDateRangeField({
- ...textFieldProps,
- enableAccessibleFieldDOMStructure: false,
- });
-
- /* If you don't need a clear button, you can skip the use of this hook */
- const processedFieldProps = useClearableField({
- ...fieldResponse,
- slots,
- slotProps,
- });
-
- return (
-
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx
deleted file mode 100644
index 6db84b3f6c575..0000000000000
--- a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import useSlotProps from '@mui/utils/useSlotProps';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-import { DateRangeIcon } from '@mui/x-date-pickers/icons';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import {
- DateRangePicker,
- DateRangePickerProps,
-} from '@mui/x-date-pickers-pro/DateRangePicker';
-import {
- unstable_useSingleInputDateRangeField as useSingleInputDateRangeField,
- SingleInputDateRangeFieldProps,
- UseSingleInputDateRangeFieldProps,
-} from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
-import { useClearableField } from '@mui/x-date-pickers/hooks';
-import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models';
-import {
- DateRangeValidationError,
- RangeFieldSection,
- DateRange,
- FieldType,
-} from '@mui/x-date-pickers-pro/models';
-
-interface BrowserFieldProps
- extends Omit, 'size'> {
- label?: React.ReactNode;
- inputRef?: React.Ref;
- InputProps?: {
- ref?: React.Ref;
- endAdornment?: React.ReactNode;
- startAdornment?: React.ReactNode;
- };
- error?: boolean;
- focused?: boolean;
- ownerState?: any;
- sx?: any;
- enableAccessibleFieldDOMStructure: boolean;
-}
-
-type BrowserFieldComponent = ((
- props: BrowserFieldProps & React.RefAttributes,
-) => React.JSX.Element) & { propTypes?: any };
-
-const BrowserField = React.forwardRef(
- (props: BrowserFieldProps, ref: React.Ref) => {
- const {
- // Should be ignored
- enableAccessibleFieldDOMStructure,
-
- disabled,
- id,
- label,
- inputRef,
- InputProps: { ref: containerRef, startAdornment, endAdornment } = {},
- // extracting `error`, 'focused', and `ownerState` as `input` does not support those props
- error,
- focused,
- ownerState,
- sx,
- ...other
- } = props;
-
- const handleRef = useForkRef(containerRef, ref);
-
- return (
-
- {startAdornment}
-
- {endAdornment}
-
- );
- },
-) as BrowserFieldComponent;
-
-interface BrowserSingleInputDateRangeFieldProps
- extends UseSingleInputDateRangeFieldProps,
- BaseSingleInputFieldProps<
- DateRange,
- Dayjs,
- RangeFieldSection,
- false,
- DateRangeValidationError
- > {
- onAdornmentClick?: () => void;
-}
-
-type BrowserSingleInputDateRangeFieldComponent = ((
- props: BrowserSingleInputDateRangeFieldProps & React.RefAttributes,
-) => React.JSX.Element) & { fieldType?: FieldType };
-
-const BrowserSingleInputDateRangeField = React.forwardRef(
- (props: BrowserSingleInputDateRangeFieldProps, ref: React.Ref) => {
- const { slots, slotProps, onAdornmentClick, ...other } = props;
-
- const textFieldProps: SingleInputDateRangeFieldProps =
- useSlotProps({
- elementType: 'input',
- externalSlotProps: slotProps?.textField,
- externalForwardedProps: other,
- ownerState: props as any,
- });
-
- textFieldProps.InputProps = {
- ...textFieldProps.InputProps,
- endAdornment: (
-
-
-
-
- ),
- };
-
- const fieldResponse = useSingleInputDateRangeField<
- Dayjs,
- false,
- typeof textFieldProps
- >({ ...textFieldProps, enableAccessibleFieldDOMStructure: false });
-
- /* If you don't need a clear button, you can skip the use of this hook */
- const processedFieldProps = useClearableField({
- ...fieldResponse,
- slots,
- slotProps,
- });
-
- return (
- , ref: React.Ref) => {
- const [isOpen, setIsOpen] = React.useState(false);
-
- const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen);
-
- const handleOpen = () => setIsOpen(true);
-
- const handleClose = () => setIsOpen(false);
-
- return (
-
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx.preview b/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx.preview
deleted file mode 100644
index bcaf8043948fb..0000000000000
--- a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-, ref: React.Ref) => {
+ (props: DateRangePickerProps, ref: React.Ref) => {
return (
{
- const {
- setOpen,
- label,
- id,
- disabled,
- InputProps: { ref: containerRef } = {},
- inputProps: { 'aria-label': ariaLabel } = {},
- } = props;
-
- const handleRef = useForkRef(ref, containerRef);
-
- return (
-
- );
-});
-
-DateRangeButtonField.fieldType = 'single-input';
-
-const ButtonDateRangePicker = React.forwardRef((props, ref) => {
- const [open, setOpen] = React.useState(false);
-
- return (
- setOpen(false)}
- onOpen={() => setOpen(true)}
- />
- );
-});
-
-export default function DateRangePickerWithButtonField() {
- const [value, setValue] = React.useState([null, null]);
-
- return (
-
- (date ? date.format('MM/DD/YYYY') : 'null'))
- .join(' - ')
- }
- value={value}
- onChange={(newValue) => setValue(newValue)}
- />
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx b/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx
deleted file mode 100644
index 1b894f55e6a15..0000000000000
--- a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import Button from '@mui/material/Button';
-import useForkRef from '@mui/utils/useForkRef';
-import { DateRange, FieldType } from '@mui/x-date-pickers-pro/models';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import {
- DateRangePicker,
- DateRangePickerProps,
-} from '@mui/x-date-pickers-pro/DateRangePicker';
-import { SingleInputDateRangeFieldProps } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
-
-interface DateRangeButtonFieldProps extends SingleInputDateRangeFieldProps {
- setOpen?: React.Dispatch>;
-}
-
-type DateRangeButtonFieldComponent = ((
- props: DateRangeButtonFieldProps & React.RefAttributes,
-) => React.JSX.Element) & { fieldType?: FieldType };
-
-const DateRangeButtonField = React.forwardRef(
- (props: DateRangeButtonFieldProps, ref: React.Ref) => {
- const {
- setOpen,
- label,
- id,
- disabled,
- InputProps: { ref: containerRef } = {},
- inputProps: { 'aria-label': ariaLabel } = {},
- } = props;
-
- const handleRef = useForkRef(ref, containerRef);
-
- return (
-
- );
- },
-) as DateRangeButtonFieldComponent;
-
-DateRangeButtonField.fieldType = 'single-input';
-
-const ButtonDateRangePicker = React.forwardRef(
- (
- props: Omit, 'open' | 'onOpen' | 'onClose'>,
- ref: React.Ref,
- ) => {
- const [open, setOpen] = React.useState(false);
-
- return (
- setOpen(false)}
- onOpen={() => setOpen(true)}
- />
- );
- },
-);
-
-export default function DateRangePickerWithButtonField() {
- const [value, setValue] = React.useState>([null, null]);
-
- return (
-
- (date ? date.format('MM/DD/YYYY') : 'null'))
- .join(' - ')
- }
- value={value}
- onChange={(newValue) => setValue(newValue)}
- />
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx.preview b/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx.preview
deleted file mode 100644
index 3a8d6daacd70e..0000000000000
--- a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
- (date ? date.format('MM/DD/YYYY') : 'null'))
- .join(' - ')
- }
- value={value}
- onChange={(newValue) => setValue(newValue)}
-/>
\ No newline at end of file
diff --git a/docs/data/date-pickers/custom-field/MaterialV6Field.js b/docs/data/date-pickers/custom-field/MaterialV6Field.js
index 35d4e0ca73ead..98a5d2d58c27f 100644
--- a/docs/data/date-pickers/custom-field/MaterialV6Field.js
+++ b/docs/data/date-pickers/custom-field/MaterialV6Field.js
@@ -9,8 +9,8 @@ export default function MaterialV6Field() {
return (
-
);
diff --git a/docs/data/date-pickers/custom-field/MaterialV6Field.tsx b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx
index 35d4e0ca73ead..98a5d2d58c27f 100644
--- a/docs/data/date-pickers/custom-field/MaterialV6Field.tsx
+++ b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx
@@ -9,8 +9,8 @@ export default function MaterialV6Field() {
return (
-
);
diff --git a/docs/data/date-pickers/custom-field/MaterialV6Field.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx.preview
index 027cb7beacfac..9041ed886d8b0 100644
--- a/docs/data/date-pickers/custom-field/MaterialV6Field.tsx.preview
+++ b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx.preview
@@ -1,2 +1,2 @@
-
-
-
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx b/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx
deleted file mode 100644
index 0c90908a7d4b5..0000000000000
--- a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react';
-import MuiTextField, { TextFieldProps } from '@mui/material/TextField';
-import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateField } from '@mui/x-date-pickers/DateField';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-
-const TextField = React.forwardRef(
- (props: TextFieldProps, ref: React.Ref) => (
-
-
-
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx.preview
deleted file mode 100644
index cd5ff731abbcd..0000000000000
--- a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
-
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/MaterialV7Field.tsx b/docs/data/date-pickers/custom-field/MaterialV7Field.tsx
deleted file mode 100644
index 07ba449750d65..0000000000000
--- a/docs/data/date-pickers/custom-field/MaterialV7Field.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { DateField } from '@mui/x-date-pickers/DateField';
-
-export default function MaterialV7Field() {
- return (
-
-
-
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/MaterialV7Field.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV7Field.tsx.preview
deleted file mode 100644
index 9708ed359729e..0000000000000
--- a/docs/data/date-pickers/custom-field/MaterialV7Field.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
);
diff --git a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx
index 82e06da7316b3..d054e12c04de2 100644
--- a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx
+++ b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx
@@ -19,14 +19,8 @@ export default function MaterialV7FieldWrapped() {
return (
-
);
diff --git a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview
index 17535291f5f3b..a31c9c5bc3512 100644
--- a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview
+++ b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview
@@ -1,8 +1,2 @@
- setOpen(false)}
- onOpen={() => setOpen(true)}
- />
- );
-}
-
-export default function PickerWithButtonField() {
- const [value, setValue] = React.useState(null);
-
- return (
-
- setValue(newValue)}
- />
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx
deleted file mode 100644
index aa09717fb29ce..0000000000000
--- a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import Button from '@mui/material/Button';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker';
-import { UseDateFieldProps } from '@mui/x-date-pickers/DateField';
-import {
- BaseSingleInputFieldProps,
- DateValidationError,
- FieldSection,
-} from '@mui/x-date-pickers/models';
-
-interface ButtonFieldProps
- extends UseDateFieldProps,
- BaseSingleInputFieldProps<
- Dayjs | null,
- Dayjs,
- FieldSection,
- false,
- DateValidationError
- > {
- setOpen?: React.Dispatch>;
-}
-
-function ButtonField(props: ButtonFieldProps) {
- const {
- setOpen,
- label,
- id,
- disabled,
- InputProps: { ref } = {},
- inputProps: { 'aria-label': ariaLabel } = {},
- } = props;
-
- return (
-
- );
-}
-
-function ButtonDatePicker(
- props: Omit, 'open' | 'onOpen' | 'onClose'>,
-) {
- const [open, setOpen] = React.useState(false);
-
- return (
- setOpen(false)}
- onOpen={() => setOpen(true)}
- />
- );
-}
-
-export default function PickerWithButtonField() {
- const [value, setValue] = React.useState(null);
-
- return (
-
- setValue(newValue)}
- />
-
- );
-}
diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx.preview b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx.preview
deleted file mode 100644
index 173a0ba169624..0000000000000
--- a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
- setValue(newValue)}
-/>
\ No newline at end of file
diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview
deleted file mode 100644
index cff735f8a7af0..0000000000000
--- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.js b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js
similarity index 79%
rename from docs/data/date-pickers/custom-field/PickerWithAutocompleteField.js
rename to docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js
index ea7512ace1590..0e849ab1228c0 100644
--- a/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.js
+++ b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js
@@ -6,19 +6,31 @@ import Stack from '@mui/material/Stack';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
function AutocompleteField(props) {
+ const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+ const { value, timezone, onChange } = internalProps;
const {
+ InputProps,
+ slotProps,
+ slots,
+ ownerState,
label,
- disabled,
- readOnly,
- id,
- value,
- onChange,
- InputProps: { ref, startAdornment, endAdornment } = {},
- inputProps,
+ focused,
+ name,
options = [],
- } = props;
+ inputProps,
+ ...other
+ } = forwardedProps;
+
+ const { hasValidationError } = useValidation({
+ validator: validateDate,
+ value,
+ timezone,
+ props: internalProps,
+ });
const mergeAdornments = (...adornments) => {
const nonNullAdornments = adornments.filter((el) => el != null);
@@ -41,25 +53,24 @@ function AutocompleteField(props) {
return (
(
,
- BaseSingleInputFieldProps<
- Dayjs | null,
- Dayjs,
- FieldSection,
- false,
- DateValidationError
- > {
+interface AutocompleteFieldProps extends DatePickerFieldProps {
/**
* @typescript-to-proptypes-ignore
*/
options?: Dayjs[];
}
-function AutocompleteField(props: AutoCompleteFieldProps) {
+function AutocompleteField(props: AutocompleteFieldProps) {
+ const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+ const { value, timezone, onChange } = internalProps;
const {
+ InputProps,
+ slotProps,
+ slots,
+ ownerState,
label,
- disabled,
- readOnly,
- id,
- value,
- onChange,
- InputProps: { ref, startAdornment, endAdornment } = {},
- inputProps,
+ focused,
+ name,
options = [],
- } = props;
+ inputProps,
+ ...other
+ } = forwardedProps;
+
+ const { hasValidationError } = useValidation({
+ validator: validateDate,
+ value,
+ timezone,
+ props: internalProps,
+ });
const mergeAdornments = (...adornments: React.ReactNode[]) => {
const nonNullAdornments = adornments.filter((el) => el != null);
@@ -62,25 +64,24 @@ function AutocompleteField(props: AutoCompleteFieldProps) {
return (
(
+ !optionsLookup[date.startOf('day').toISOString()]}
@@ -138,7 +139,7 @@ function AutocompleteDatePicker(props: AutocompleteDatePickerProps) {
const today = dayjs().startOf('day');
-export default function PickerWithAutocompleteField() {
+export default function MaterialDatePicker() {
return (
{
+ if (pickersContext.open) {
+ pickersContext.onClose(event);
+ } else {
+ pickersContext.onOpen(event);
+ }
+ };
+
+ const valueStr = value == null ? parsedFormat : value.format(format);
+
+ return (
+
+ );
+}
+
+function ButtonFieldDatePicker(props) {
+ return (
+
+
+ );
+}
diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
new file mode 100644
index 0000000000000..1f31f5d63e6a8
--- /dev/null
+++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import Button from '@mui/material/Button';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import {
+ DatePicker,
+ DatePickerProps,
+ DatePickerFieldProps,
+} from '@mui/x-date-pickers/DatePicker';
+import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
+import {
+ useSplitFieldProps,
+ useParsedFormat,
+ usePickersContext,
+} from '@mui/x-date-pickers/hooks';
+
+function ButtonDateField(props: DatePickerFieldProps) {
+ const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+ const { value, timezone, format } = internalProps;
+ const {
+ InputProps,
+ slotProps,
+ slots,
+ ownerState,
+ label,
+ focused,
+ name,
+ ...other
+ } = forwardedProps;
+
+ const pickersContext = usePickersContext();
+
+ const parsedFormat = useParsedFormat(internalProps);
+ const { hasValidationError } = useValidation({
+ validator: validateDate,
+ value,
+ timezone,
+ props: internalProps,
+ });
+
+ const handleTogglePicker = (event: React.UIEvent) => {
+ if (pickersContext.open) {
+ pickersContext.onClose(event);
+ } else {
+ pickersContext.onOpen(event);
+ }
+ };
+
+ const valueStr = value == null ? parsedFormat : value.format(format);
+
+ return (
+
+ );
+}
+
+function ButtonFieldDatePicker(props: DatePickerProps) {
+ return (
+
+
+ );
+}
diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx.preview b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx.preview
new file mode 100644
index 0000000000000..5f578e21a1d63
--- /dev/null
+++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx.preview
@@ -0,0 +1 @@
+
+
+ );
+}
diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx
new file mode 100644
index 0000000000000..bc154d9a2b9f5
--- /dev/null
+++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import Button from '@mui/material/Button';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import {
+ DateRangePicker,
+ DateRangePickerProps,
+ DateRangePickerFieldProps,
+} from '@mui/x-date-pickers-pro/DateRangePicker';
+import { useValidation } from '@mui/x-date-pickers/validation';
+import { validateDateRange } from '@mui/x-date-pickers-pro/validation';
+import {
+ useSplitFieldProps,
+ useParsedFormat,
+ usePickersContext,
+} from '@mui/x-date-pickers/hooks';
+
+function ButtonDateRangeField(props: DateRangePickerFieldProps) {
+ const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+ const { value, timezone, format } = internalProps;
+ const {
+ InputProps,
+ slotProps,
+ slots,
+ ownerState,
+ label,
+ focused,
+ name,
+ ...other
+ } = forwardedProps;
+
+ const pickersContext = usePickersContext();
+
+ const parsedFormat = useParsedFormat(internalProps);
+ const { hasValidationError } = useValidation({
+ validator: validateDateRange,
+ value,
+ timezone,
+ props: internalProps,
+ });
+
+ const handleTogglePicker = (event: React.UIEvent) => {
+ if (pickersContext.open) {
+ pickersContext.onClose(event);
+ } else {
+ pickersContext.onOpen(event);
+ }
+ };
+
+ const formattedValue = (value ?? [null, null])
+ .map((date) => (date == null ? parsedFormat : date.format(format)))
+ .join(' – ');
+
+ return (
+
+ );
+}
+
+// TODO v8: Will be removed before the end of the alpha since single input will become the default field.
+ButtonDateRangeField.fieldType = 'single-input';
+
+function ButtonFieldDateRangePicker(props: DateRangePickerProps) {
+ return (
+
+
+ );
+}
diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx.preview b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx.preview
new file mode 100644
index 0000000000000..6512674c0bb6b
--- /dev/null
+++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx.preview
@@ -0,0 +1 @@
+
+
+ );
+}
diff --git a/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx
new file mode 100644
index 0000000000000..a589022eada63
--- /dev/null
+++ b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx
@@ -0,0 +1,168 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import { useRifm } from 'rifm';
+import TextField from '@mui/material/TextField';
+import useControlled from '@mui/utils/useControlled';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import {
+ DatePicker,
+ DatePickerProps,
+ DatePickerFieldProps,
+} from '@mui/x-date-pickers/DatePicker';
+import { useSplitFieldProps, useParsedFormat } from '@mui/x-date-pickers/hooks';
+import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
+
+const MASK_USER_INPUT_SYMBOL = '_';
+const ACCEPT_REGEX = /[\d]/gi;
+
+const staticDateWith2DigitTokens = dayjs('2019-11-21T11:30:00.000');
+const staticDateWith1DigitTokens = dayjs('2019-01-01T09:00:00.000');
+
+function getValueStrFromValue(value: Dayjs | null, format: string) {
+ if (value == null) {
+ return '';
+ }
+
+ return value.isValid() ? value.format(format) : '';
+}
+
+function MaskedField(props: DatePickerFieldProps) {
+ const { slots, slotProps, ...other } = props;
+
+ const { forwardedProps, internalProps } = useSplitFieldProps(other, 'date');
+
+ const {
+ format,
+ value: valueProp,
+ defaultValue,
+ onChange,
+ timezone,
+ onError,
+ } = internalProps;
+
+ const [value, setValue] = useControlled({
+ controlled: valueProp,
+ default: defaultValue ?? null,
+ name: 'MaskedField',
+ state: 'value',
+ });
+
+ // Control the input text
+ const [inputValue, setInputValue] = React.useState(() =>
+ getValueStrFromValue(value, format),
+ );
+
+ React.useEffect(() => {
+ if (value && value.isValid()) {
+ const newDisplayDate = getValueStrFromValue(value, format);
+ setInputValue(newDisplayDate);
+ }
+ }, [format, value]);
+
+ const parsedFormat = useParsedFormat(internalProps);
+
+ const { hasValidationError, getValidationErrorForNewValue } = useValidation({
+ value,
+ timezone,
+ onError,
+ props: internalProps,
+ validator: validateDate,
+ });
+
+ const handleValueStrChange = (newValueStr: string) => {
+ setInputValue(newValueStr);
+
+ const newValue = dayjs(newValueStr, format);
+ setValue(newValue);
+
+ if (onChange) {
+ onChange(newValue, {
+ validationError: getValidationErrorForNewValue(newValue),
+ });
+ }
+ };
+
+ const rifmFormat = React.useMemo(() => {
+ const formattedDateWith1Digit = staticDateWith1DigitTokens.format(format);
+ const inferredFormatPatternWith1Digits = formattedDateWith1Digit.replace(
+ ACCEPT_REGEX,
+ MASK_USER_INPUT_SYMBOL,
+ );
+ const inferredFormatPatternWith2Digits = staticDateWith2DigitTokens
+ .format(format)
+ .replace(ACCEPT_REGEX, '_');
+
+ if (inferredFormatPatternWith1Digits !== inferredFormatPatternWith2Digits) {
+ throw new Error(
+ `Mask does not support numbers with variable length such as 'M'.`,
+ );
+ }
+
+ const maskToUse = inferredFormatPatternWith1Digits;
+
+ return function formatMaskedDate(valueToFormat: string) {
+ let outputCharIndex = 0;
+ return valueToFormat
+ .split('')
+ .map((character, characterIndex) => {
+ ACCEPT_REGEX.lastIndex = 0;
+
+ if (outputCharIndex > maskToUse.length - 1) {
+ return '';
+ }
+
+ const maskChar = maskToUse[outputCharIndex];
+ const nextMaskChar = maskToUse[outputCharIndex + 1];
+
+ const acceptedChar = ACCEPT_REGEX.test(character) ? character : '';
+ const formattedChar =
+ maskChar === MASK_USER_INPUT_SYMBOL
+ ? acceptedChar
+ : maskChar + acceptedChar;
+
+ outputCharIndex += formattedChar.length;
+
+ const isLastCharacter = characterIndex === valueToFormat.length - 1;
+ if (
+ isLastCharacter &&
+ nextMaskChar &&
+ nextMaskChar !== MASK_USER_INPUT_SYMBOL
+ ) {
+ // when cursor at the end of mask part (e.g. month) prerender next symbol "21" -> "21/"
+ return formattedChar ? formattedChar + nextMaskChar : '';
+ }
+
+ return formattedChar;
+ })
+ .join('');
+ };
+ }, [format]);
+
+ const rifmProps = useRifm({
+ value: inputValue,
+ onChange: handleValueStrChange,
+ format: rifmFormat,
+ });
+
+ return (
+ ) {
+ return
+
+ );
+}
diff --git a/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx.preview b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx.preview
new file mode 100644
index 0000000000000..1340a82dd55df
--- /dev/null
+++ b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx.preview
@@ -0,0 +1 @@
+
) {
+function ReadOnlyDateField(props: DatePickerFieldProps) {
const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
const { value, timezone, format } = internalProps;
const { InputProps, slotProps, slots, ...other } = forwardedProps;
@@ -62,7 +62,7 @@ function ReadOnlyFieldDatePicker(props: DatePickerProps) {
);
}
-export default function ReadOnlyMaterialTextField() {
+export default function MaterialDatePicker() {
return (
, // The headless field props
+ extends UseDateFieldProps, // The headless field props
BaseSingleInputFieldProps<
Dayjs | null,
Dayjs,
FieldSection,
- false, // `true` for `enableAccessibleFieldDOMStructure`
+ true, // `false` for `enableAccessibleFieldDOMStructure={false}`
DateValidationError
> {} // The DOM field props
interface JoyDateTimeFieldProps
- extends UseDateTimeFieldProps, // The headless field props
+ extends UseDateTimeFieldProps, // The headless field props
BaseSingleInputFieldProps<
Dayjs | null,
Dayjs,
FieldSection,
- false, // `true` for `enableAccessibleFieldDOMStructure`
+ true, // `false` for `enableAccessibleFieldDOMStructure={false}`
DateTimeValidationError
> {} // The DOM field props
```
diff --git a/docs/data/date-pickers/custom-layout/custom-layout.md b/docs/data/date-pickers/custom-layout/custom-layout.md
index 421e80851236c..ca327aaa57b69 100644
--- a/docs/data/date-pickers/custom-layout/custom-layout.md
+++ b/docs/data/date-pickers/custom-layout/custom-layout.md
@@ -8,10 +8,10 @@ packageName: '@mui/x-date-pickers'
# Custom layout
-
-
);
diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx
index 1f32eca967da6..62c0924c3c90d 100644
--- a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx
+++ b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx
@@ -8,7 +8,7 @@ export default function BasicV7DOMStructure() {
return (
-
);
diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview
index f33bc6c8fdc7e..2dc079345c091 100644
--- a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview
+++ b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview
@@ -1 +1 @@
-` argument.
+
+
+
+```bash
+// Date and Time Pickers specific
+npx @mui/x-codemod@latest v8.0.0/pickers/preset-safe
+
+// Target the other packages as well
+npx @mui/x-codemod@latest v8.0.0/preset-safe
+```
+
+:::info
+If you want to run the transformers one by one, check out the transformers included in the [preset-safe codemod for pickers](https://github.com/mui/mui-x/blob/HEAD/packages/x-codemod/README.md#preset-safe-for-pickers-v800) for more details.
+:::
+
+Breaking changes that are handled by this codemod are denoted by a ✅ emoji in the table of contents on the right side of the screen.
+
+If you have already applied the `v8.0.0/pickers/preset-safe` (or `v8.0.0/preset-safe`) codemod, then you should not need to take any further action on these items.
+
+All other changes must be handled manually.
+
+:::warning
+Not all use cases are covered by codemods. In some scenarios, like props spreading, cross-file dependencies, etc., the changes are not properly identified and therefore must be handled manually.
+
+For example, if a codemod tries to rename a prop, but this prop is hidden with the spread operator, it won't be transformed as expected.
+
+```tsx
+
+ > &
+ UseDateFieldProps;
+ ```
+
+- `UseTimeFieldComponentProps`
+
+ ```ts
+ import { UseTimeFieldProps } from '@mui/x-date-pickers/TimeField';
+ import { PickerValidDate } from '@mui/x-date-pickers/models';
+
+ type UseTimeFieldComponentProps<
+ TDate extends PickerValidDate,
+ TEnableAccessibleFieldDOMStructure extends boolean,
+ TChildProps extends {},
+ > = Omit<
+ TChildProps,
+ keyof UseTimeFieldProps
+ > &
+ UseTimeFieldProps;
+ ```
+
+- `UseDateTimeFieldComponentProps`
+
+ ```ts
+ import { UseDateTimeFieldProps } from '@mui/x-date-pickers/DateTimeField';
+ import { PickerValidDate } from '@mui/x-date-pickers/models';
+
+ type UseDateTimeFieldComponentProps<
+ TDate extends PickerValidDate,
+ TEnableAccessibleFieldDOMStructure extends boolean,
+ TChildProps extends {},
+ > = Omit<
+ TChildProps,
+ keyof UseDateTimeFieldProps
+ > &
+ UseDateTimeFieldProps;
+ ```
+
+## Stop passing `utils` and the date object to some translation keys
+
+Some translation keys no longer require `utils` and the date object as parameters, but only the formatted value as a string. The keys affected by this changes are: `clockLabelText`, `openDatePickerDialogue` and `openTimePickerDialogue`.
+If you have customized those translation keys, you have to update them following the examples below:
+
+- If you are setting a custom value in a picker component:
+
+```diff
+-clockLabelText: (view, time, utils) =>
+- `Select ${view}. ${
+- time === null || !utils.isValid(time)
+- ? 'No time selected'
+- : `Selected time is ${utils.format(time, 'fullTime')}`
+- }`
++clockLabelText: (view, formattedTime) =>
++ `Select ${view}. ${
++ formattedTime == null ? 'No time selected' : `Selected time is ${formattedTime}`
++ }`
+
+-openDatePickerDialogue: (value, utils) =>
+- value !== null && utils.isValid(value)
+- ? `Choose date, selected date is ${utils.format(value, 'fullDate')}`
+- : 'Choose date',
++openDatePickerDialogue: (formattedDate) =>
++ formattedDate ? `Choose date, selected date is ${formattedDate}` : 'Choose date'
+
+-openTimePickerDialogue: (value, utils) =>
+- value !== null && utils.isValid(value)
+- ? `Choose time, selected time is ${utils.format(value, 'fullTime')}`
+- : 'Choose time',
++openTimePickerDialogue: (formattedTime) =>
++ formattedTime ? `Choose time, selected time is ${formattedTime}` : 'Choose time'
+```
+
+- If you are setting a custom value in the `LocalizationProvider`:
+
+```diff
+
+- `Select ${view}. ${
+- time === null || !utils.isValid(time)
+- ? 'No time selected'
+- : `Selected time is ${utils.format(time, 'fullTime')}`
+- }`
++ clockLabelText: (view, formattedTime) =>
++ `Select ${view}. ${
++ formattedTime == null ? 'No time selected' : `Selected time is ${formattedTime}`
++ }`
+- openDatePickerDialogue: (value, utils) =>
+- value !== null && utils.isValid(value)
+- ? `Choose date, selected date is ${utils.format(value, 'fullDate')}`
+- : 'Choose date',
++ openDatePickerDialogue: (formattedDate) =>
++ formattedDate ? `Choose date, selected date is ${formattedDate}` : 'Choose date'
+- openTimePickerDialogue: (value, utils) =>
+- value !== null && utils.isValid(value)
+- ? `Choose time, selected time is ${utils.format(value, 'fullTime')}`
+- : 'Choose time',
++ openTimePickerDialogue: (formattedTime) =>
++ formattedTime ? `Choose time, selected time is ${formattedTime}` : 'Choose time'
+ }} >
+```
+
+- If you using this translation key in a custom component:
+
+```diff
+ const translations = usePickersTranslations();
+
+-const clockLabelText = translations.clockLabelText(
+- view,
+- value,
+- {} as any,
+- value == null ? null : value.format('hh:mm:ss')
+-);
++const clockLabelText = translations.clockLabelText(
++ view,
++ value == null ? null : value.format('hh:mm:ss')
++);
+
+-const openDatePickerDialogue = translations.openDatePickerDialogue(
+- value,
+- {} as any,
+- value == null ? null : value.format('MM/DD/YYY')
+-);
++const openDatePickerDialogue = translations.openDatePickerDialogue(
++ value == null ? null : value.format('MM/DD/YYY')
++);
+
+-const openTimePickerDialogue = translations.openTimePickerDialogue(
+- value,
+- {} as any,
+- value == null ? null : value.format('hh:mm:ss')
+-);
++const openTimePickerDialogue = translations.openTimePickerDialogue(
++ value == null ? null : value.format('hh:mm:ss')
++);
+```
+
+Also the following types and interfaces no longer receive a generic type parameter:
+
+- `PickersComponentAgnosticLocaleText`
+- `PickersInputComponentLocaleText`
+- `PickersInputLocaleText`
+- `PickersLocaleText`
+- `PickersTranslationKeys`
diff --git a/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md b/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md
index 2b1a932e33ffe..3fc640a648322 100644
--- a/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md
+++ b/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md
@@ -8,7 +8,7 @@ productId: x-tree-view
## Introduction
-This is a reference for migrating your site's tree view from `@mui/lab` to `@mui/x-tree-view`.
+This is a reference for migrating your site's Tree View from `@mui/lab` to `@mui/x-tree-view`.
This migration is about the npm packages used, it **does not** affect the behavior of the components in your application.
[//]: # 'You can find why we are moving in this direction in the [announcement blog post](/blog/lab-tree-view-to-mui-x/).'
diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md
index 7d979f8af087e..2efbd13455fdd 100644
--- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md
+++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md
@@ -13,7 +13,7 @@ To read more about the changes from the new major, check out [the blog post abou
## Start using the new release
-In `package.json`, change the version of the tree view package to `^7.0.0`.
+In `package.json`, change the version of the Tree View package to `^7.0.0`.
```diff
-"@mui/x-tree-view": "^6.0.0",
@@ -113,7 +113,7 @@ Here is an example of how you can transpile these features on Webpack 4 using th
### ✅ Rename `nodeId` to `itemId`
-The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
+The required `nodeId` prop used by the Tree Item has been renamed to `itemId` for consistency:
```diff
@@ -140,10 +140,10 @@ The same change has been applied to the `ContentComponent` prop:
}
```
-### ✅ Use `SimpleTreeView` instead of `TreeView`
+### ✅ Use Simple Tree View instead of Tree View
-The `TreeView` component has been deprecated and will be removed in the next major.
-You can start replacing it with the new `SimpleTreeView` component which has exactly the same API:
+The `
console.log(itemId, isExpanded)
@@ -461,7 +461,7 @@ If you were using the `onNodeSelect` prop to react to the selection or deselecti
you can use the new `onItemSelectionToggle` prop which is called whenever an item is selected or deselected with its id and selection status.
```tsx
-// It is also available on the deprecated `TreeView` component
+// It is also available on the deprecated `
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/migration/migration-tree-view-v7/migration-tree-view-v7.md b/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
new file mode 100644
index 0000000000000..c766981007264
--- /dev/null
+++ b/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
@@ -0,0 +1,180 @@
+---
+productId: x-tree-view
+---
+
+# Migration from v7 to v8
+
+` argument.
+
+
+
+```bash
+// Tree View specific
+npx @mui/x-codemod@latest v8.0.0/tree-view/preset-safe
+
+// Target the other packages as well
+npx @mui/x-codemod@latest v8.0.0/preset-safe
+```
+
+:::info
+If you want to run the transformers one by one, check out the transformers included in the [preset-safe codemod for the Tree View](https://github.com/mui/mui-x/blob/HEAD/packages/x-codemod/README.md#preset-safe-for-tree-view-v800) for more details.
+:::
+
+Breaking changes that are handled by this codemod are denoted by a ✅ emoji in the table of contents on the right side of the screen.
+
+If you have already applied the `v8.0.0/tree-view/preset-safe` (or `v8.0.0/preset-safe`) codemod, then you should not need to take any further action on these items.
+
+All other changes must be handled manually.
+
+:::warning
+Not all use cases are covered by codemods. In some scenarios, like props spreading, cross-file dependencies, etc., the changes are not properly identified and therefore must be handled manually.
+
+For example, if a codemod tries to rename a prop, but this prop is hidden with the spread operator, it won't be transformed as expected.
+
+```tsx
+
++
+-
++
+
+```
+
+## Rename the `TreeItem2` (and related utils)
+
+All the new Tree Item-related components and utils (introduced in the previous major to improve the DX of the Tree Item component) are becoming the default way of using the Tree Item and are therefore losing their `2` suffix:
+
+```diff
+ import * as React from 'react';
+ import {
+- TreeItem2,
++ TreeItem,
+- TreeItem2Root,
++ TreeItemRoot,
+- TreeItem2Content,
++ TreeItemContent,
+- TreeItem2IconContainer,
++ TreeItemIconContainer,
+- TreeItem2GroupTransition,
++ TreeItemGroupTransition,
+- TreeItem2Checkbox,
++ TreeItemCheckbox,
+- TreeItem2Label,
++ TreeItemLabel,
+- TreeItem2Props,
++ TreeItemProps,
+- TreeItem2Slots,
++ TreeItemSlots,
+- TreeItem2SlotProps,
++ TreeItemSlotProps,
+- } from '@mui/x-tree-view/TreeItem2';
++ } from '@mui/x-tree-view/TreeItem';
+ import {
+- useTreeItem2,
++ useTreeItem,
+- unstable_useTreeItem2 as useAliasedTreeItem,
++ unstable_useTreeItem as useAliasedTreeItem,
+- UseTreeItem2Parameters,
++ UseTreeItemParameters,
+- UseTreeItem2ReturnValue,
++ UseTreeItemReturnValue,
+- UseTreeItem2Status,
++ UseTreeItemStatus,
+- UseTreeItem2RootSlotOwnProps,
++ UseTreeItemRootSlotOwnProps,
+- UseTreeItem2ContentSlotOwnProps,
++ UseTreeItemContentSlotOwnProps,
+- UseTreeItem2LabelInputSlotOwnProps,
++ UseTreeItemLabelInputSlotOwnProps,
+- UseTreeItem2LabelSlotOwnProps,
++ UseTreeItemLabelSlotOwnProps,
+- UseTreeItem2CheckboxSlotOwnProps,
++ UseTreeItemCheckboxSlotOwnProps,
+- UseTreeItem2IconContainerSlotOwnProps,
++ UseTreeItemIconContainerSlotOwnProps,
+- UseTreeItem2GroupTransitionSlotOwnProps,
++ UseTreeItemGroupTransitionSlotOwnProps,
+- UseTreeItem2DragAndDropOverlaySlotOwnProps,
++ UseTreeItemDragAndDropOverlaySlotOwnProps,
+- } from '@mui/x-tree-view/useTreeItem2';
++ } from '@mui/x-tree-view/useTreeItem';
+- import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
++ import { useTreeItemUtils } from '@mui/x-tree-view/hooks';
+ import {
+- TreeItem2Provider,
++ TreeItemProvider,
+- TreeItem2ProviderProps,
++ TreeItemProviderProps,
+- } from '@mui/x-tree-view/TreeItem2Provider';
++ } from '@mui/x-tree-view/TreeItemProvider';
+ import {
+- TreeItem2Icon,
++ TreeItemIcon,
+- TreeItem2IconProps,
++ TreeItemIconProps,
+- TreeItem2IconSlots,
++ TreeItemIconSlots,
+- TreeItem2IconSlotProps,
++ TreeItemIconSlotProps,
+- } from '@mui/x-tree-view/TreeItem2Icon';
++ } from '@mui/x-tree-view/TreeItemIcon';
+ import {
+- TreeItem2DragAndDropOverlay,
++ TreeItemDragAndDropOverlay,
+- TreeItem2DragAndDropOverlayProps,
++ TreeItemDragAndDropOverlayProps,
+- } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
++ } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
+ import {
+- TreeItem2LabelInput,
++ TreeItemLabelInput,
+- TreeItem2LabelInputProps,
++ TreeItemLabelInputProps,
+- } from '@mui/x-tree-view/TreeItem2LabelInput';
++ } from '@mui/x-tree-view/TreeItemLabelInput';
+```
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
index 890060cd717ba..62ebde3d4dee7 100644
--- a/docs/data/pages.ts
+++ b/docs/data/pages.ts
@@ -1,8 +1,8 @@
import type { MuiPage } from 'docs/src/MuiPage';
-import chartsComponentApi from './charts-component-api-pages';
-import dataGridComponentApi from './data-grid-component-api-pages';
-import pickersComponentApi from './date-pickers-component-api-pages';
-import treeViewComponentApi from './tree-view-component-api-pages';
+import chartsComponentApi from './chartsApiPages';
+import dataGridComponentApi from './dataGridApiPages';
+import pickersComponentApi from './datePickersApiPages';
+import treeViewComponentApi from './treeViewApiPages';
const pages: MuiPage[] = [
{
@@ -23,139 +23,168 @@ const pages: MuiPage[] = [
{
pathname: '/x/common-features-group',
title: 'Common concepts',
- children: [{ pathname: `/x/common-concepts/custom-components`, title: 'Custom subcomponents' }],
+ children: [
+ { pathname: `/x/common-concepts/custom-components`, title: 'Slots and subcomponents' },
+ ],
},
{
pathname: '/x/react-data-grid-group',
title: 'Data Grid',
-
children: [
{ pathname: '/x/react-data-grid', title: 'Overview' },
- { pathname: '/x/react-data-grid/demo' },
{ pathname: '/x/react-data-grid/getting-started' },
- { pathname: '/x/react-data-grid/layout' },
- {
- pathname: '/x/react-data-grid/columns',
- children: [
- { pathname: '/x/react-data-grid/column-definition' },
- { pathname: '/x/react-data-grid/column-dimensions' },
- { pathname: '/x/react-data-grid/column-visibility' },
- { pathname: '/x/react-data-grid/custom-columns' },
- { pathname: '/x/react-data-grid/column-header' },
- { pathname: '/x/react-data-grid/column-menu' },
- { pathname: '/x/react-data-grid/column-spanning' },
- { pathname: '/x/react-data-grid/column-groups' },
- { pathname: '/x/react-data-grid/column-ordering', plan: 'pro' },
- { pathname: '/x/react-data-grid/column-pinning', plan: 'pro' },
- ],
- },
- {
- pathname: '/x/react-data-grid/rows',
- children: [
- { pathname: '/x/react-data-grid/row-definition' },
- { pathname: '/x/react-data-grid/row-updates' },
- { pathname: '/x/react-data-grid/row-height' },
- { pathname: '/x/react-data-grid/row-spanning', newFeature: true },
- { pathname: '/x/react-data-grid/master-detail', plan: 'pro' },
- { pathname: '/x/react-data-grid/row-ordering', plan: 'pro' },
- { pathname: '/x/react-data-grid/row-pinning', plan: 'pro' },
- { pathname: '/x/react-data-grid/row-recipes', title: 'Recipes' },
- ],
- },
- { pathname: '/x/react-data-grid/editing' },
- { pathname: '/x/react-data-grid/sorting' },
+ { pathname: '/x/react-data-grid/demo' },
+ { pathname: '/x/react-data-grid/faq', title: 'FAQs' },
{
- pathname: '/x/react-data-grid/filtering-group',
- title: 'Filtering',
+ pathname: '/x/react-data-grid/main-features',
+ subheader: 'Main features',
children: [
- { pathname: '/x/react-data-grid/filtering', title: 'Overview' },
- { pathname: '/x/react-data-grid/filtering/customization' },
- { pathname: '/x/react-data-grid/filtering/quick-filter' },
- { pathname: '/x/react-data-grid/filtering/server-side', title: 'Server-side filter' },
- { pathname: '/x/react-data-grid/filtering/multi-filters', plan: 'pro' },
+ { pathname: '/x/react-data-grid/layout' },
{
- pathname: '/x/react-data-grid/filtering/header-filters',
- plan: 'pro',
- newFeature: true,
+ pathname: '/x/react-data-grid/columns',
+ children: [
+ { pathname: '/x/react-data-grid/column-definition' },
+ { pathname: '/x/react-data-grid/column-dimensions' },
+ { pathname: '/x/react-data-grid/column-visibility' },
+ { pathname: '/x/react-data-grid/custom-columns' },
+ { pathname: '/x/react-data-grid/column-header' },
+ { pathname: '/x/react-data-grid/column-menu' },
+ { pathname: '/x/react-data-grid/column-spanning' },
+ { pathname: '/x/react-data-grid/column-groups' },
+ { pathname: '/x/react-data-grid/column-ordering', plan: 'pro' },
+ { pathname: '/x/react-data-grid/column-pinning', plan: 'pro' },
+ ],
},
- { pathname: '/x/react-data-grid/filtering-recipes', title: 'Recipes' },
- ],
- },
- { pathname: '/x/react-data-grid/pagination' },
- {
- pathname: '/x/react-data-grid/selection',
- children: [
- { pathname: '/x/react-data-grid/row-selection' },
- { pathname: '/x/react-data-grid/cell-selection', plan: 'premium', newFeature: true },
- ],
- },
- { pathname: '/x/react-data-grid/export' },
- { pathname: '/x/react-data-grid/clipboard', title: 'Copy and paste', newFeature: true },
- { pathname: '/x/react-data-grid/overlays', title: 'Overlays' },
- { pathname: '/x/react-data-grid/components', title: 'Custom subcomponents' },
- {
- pathname: '/x/react-data-grid/style-group',
- title: 'Style',
- children: [
- { pathname: '/x/react-data-grid/style', title: 'Overview' },
- { pathname: '/x/react-data-grid/style-recipes', title: 'Recipes' },
+ {
+ pathname: '/x/react-data-grid/rows',
+ children: [
+ { pathname: '/x/react-data-grid/row-definition' },
+ { pathname: '/x/react-data-grid/row-updates' },
+ { pathname: '/x/react-data-grid/row-height' },
+ { pathname: '/x/react-data-grid/row-spanning', newFeature: true },
+ { pathname: '/x/react-data-grid/master-detail', plan: 'pro' },
+ { pathname: '/x/react-data-grid/row-ordering', plan: 'pro' },
+ { pathname: '/x/react-data-grid/row-pinning', plan: 'pro' },
+ { pathname: '/x/react-data-grid/row-recipes', title: 'Recipes' },
+ ],
+ },
+ {
+ pathname: '/x/react-data-grid/editing-group',
+ title: 'Editing',
+ children: [
+ { pathname: '/x/react-data-grid/editing', title: 'Overview' },
+ { pathname: '/x/react-data-grid/recipes-editing', title: 'Recipes' },
+ ],
+ },
+ { pathname: '/x/react-data-grid/sorting' },
+ {
+ pathname: '/x/react-data-grid/filtering-group',
+ title: 'Filtering',
+ children: [
+ { pathname: '/x/react-data-grid/filtering', title: 'Overview' },
+ { pathname: '/x/react-data-grid/filtering/customization' },
+ { pathname: '/x/react-data-grid/filtering/quick-filter' },
+ { pathname: '/x/react-data-grid/filtering/server-side', title: 'Server-side filter' },
+ { pathname: '/x/react-data-grid/filtering/multi-filters', plan: 'pro' },
+ {
+ pathname: '/x/react-data-grid/filtering/header-filters',
+ plan: 'pro',
+ newFeature: true,
+ },
+ { pathname: '/x/react-data-grid/filtering-recipes', title: 'Recipes' },
+ ],
+ },
+ { pathname: '/x/react-data-grid/pagination' },
+ {
+ pathname: '/x/react-data-grid/selection',
+ children: [
+ { pathname: '/x/react-data-grid/row-selection' },
+ { pathname: '/x/react-data-grid/cell-selection', plan: 'premium', newFeature: true },
+ ],
+ },
+ { pathname: '/x/react-data-grid/virtualization' },
+ { pathname: '/x/react-data-grid/accessibility' },
+ { pathname: '/x/react-data-grid/localization' },
],
},
- { pathname: '/x/react-data-grid/localization' },
- { pathname: '/x/react-data-grid/scrolling' },
- { pathname: '/x/react-data-grid/virtualization' },
- { pathname: '/x/react-data-grid/accessibility' },
- { pathname: '/x/react-data-grid/performance' },
- { pathname: '/x/react-data-grid/tree-data', plan: 'pro' },
- { 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/server-side-data-group',
- title: 'Server-side data',
- plan: 'pro',
+ pathname: '/x/react-data-grid/advanced-features-group',
+ subheader: 'Advanced features',
children: [
- { pathname: '/x/react-data-grid/server-side-data', title: 'Overview' },
- { pathname: '/x/react-data-grid/server-side-data/tree-data', plan: 'pro' },
+ { pathname: '/x/react-data-grid/tree-data', plan: 'pro' },
{
- pathname: '/x/react-data-grid/server-side-data/lazy-loading',
- plan: 'pro',
- planned: true,
+ pathname: '/x/react-data-grid/row-grouping-group',
+ title: 'Row grouping',
+ plan: 'premium',
+ children: [
+ { pathname: '/x/react-data-grid/row-grouping', title: 'Overview' },
+ {
+ pathname: '/x/react-data-grid/recipes-row-grouping',
+ title: 'Recipes',
+ },
+ ],
},
+ { pathname: '/x/react-data-grid/aggregation', plan: 'premium' },
+ { pathname: '/x/react-data-grid/pivoting', plan: 'premium', planned: true },
+ { pathname: '/x/react-data-grid/export' },
+ { pathname: '/x/react-data-grid/clipboard', title: 'Copy and paste', newFeature: true },
+ { pathname: '/x/react-data-grid/scrolling' },
+
{
- pathname: '/x/react-data-grid/server-side-data/infinite-loading',
+ pathname: '/x/react-data-grid/list-view',
+ title: 'List view',
plan: 'pro',
- planned: true,
+ unstable: true,
},
{
- pathname: '/x/react-data-grid/server-side-data/row-grouping',
+ pathname: '/x/react-data-grid/server-side-data-group',
+ title: 'Server-side data',
plan: 'pro',
- planned: true,
- },
- {
- pathname: '/x/react-data-grid/server-side-data/aggregation',
- plan: 'premium',
- planned: true,
+ children: [
+ { pathname: '/x/react-data-grid/server-side-data', title: 'Overview' },
+ { pathname: '/x/react-data-grid/server-side-data/tree-data', plan: 'pro' },
+ {
+ pathname: '/x/react-data-grid/server-side-data/lazy-loading',
+ plan: 'pro',
+ planned: true,
+ },
+ {
+ pathname: '/x/react-data-grid/server-side-data/infinite-loading',
+ plan: 'pro',
+ planned: true,
+ },
+ {
+ pathname: '/x/react-data-grid/server-side-data/row-grouping',
+ plan: 'premium',
+ planned: true,
+ },
+ {
+ pathname: '/x/react-data-grid/server-side-data/aggregation',
+ plan: 'premium',
+ planned: true,
+ },
+ ],
},
],
},
{
- pathname: '/x/react-data-grid/custom-behavior',
+ pathname: '/x/react-data-grid/customization-group',
+ subheader: 'Customization',
children: [
- { pathname: '/x/react-data-grid/api-object', title: 'API object' },
- { pathname: '/x/react-data-grid/events' },
- { pathname: '/x/react-data-grid/state' },
+ { pathname: '/x/react-data-grid/style', title: 'Styling basics' },
+ { pathname: '/x/react-data-grid/style-recipes', title: 'Styling recipes' },
+ { pathname: '/x/react-data-grid/overlays', title: 'Overlays' },
+ { pathname: '/x/react-data-grid/components', title: 'Custom subcomponents' },
],
},
{
- pathname: '/x/react-data-grid/recipes',
+ pathname: '/x/api/resources-group',
+ subheader: 'Resources',
children: [
- { pathname: '/x/react-data-grid/recipes-editing', title: 'Editing' },
- {
- pathname: '/x/react-data-grid/recipes-row-grouping',
- title: 'Row grouping',
- plan: 'premium',
- },
+ { pathname: '/x/react-data-grid/api-object', title: 'API object' },
+ { pathname: '/x/react-data-grid/events' },
+ { pathname: '/x/react-data-grid/state' },
+ { pathname: '/x/react-data-grid/performance' },
],
},
{
@@ -217,7 +246,6 @@ const pages: MuiPage[] = [
},
],
},
- { pathname: '/x/react-data-grid/faq', title: 'FAQ' },
],
},
{
@@ -227,8 +255,7 @@ const pages: MuiPage[] = [
{ pathname: '/x/react-date-pickers', title: 'Overview' },
{ pathname: '/x/react-date-pickers/getting-started' },
{ pathname: '/x/react-date-pickers/base-concepts' },
- { pathname: '/x/react-date-pickers/accessibility' },
- { pathname: '/x/react-date-pickers/faq', title: 'FAQ' },
+ { pathname: '/x/react-date-pickers/faq', title: 'FAQs' },
{
pathname: '/x/react-date-pickers-components',
subheader: 'Components',
@@ -321,20 +348,16 @@ const pages: MuiPage[] = [
],
},
{ pathname: '/x/react-date-pickers/fields', title: 'Field components' },
- {
- pathname: '/x/api/date-pickers-group',
- title: 'API reference',
- children: [{ pathname: '/x/api/date-pickers', title: 'Index' }, ...pickersComponentApi],
- },
],
},
{
- pathname: '/x/react-date-pickers/common-features',
- subheader: 'Common features',
+ pathname: '/x/react-date-pickers/main-features',
+ subheader: 'Main features',
children: [
{ pathname: '/x/react-date-pickers/validation' },
{ pathname: '/x/react-date-pickers/lifecycle', title: 'Components lifecycle' },
{ pathname: '/x/react-date-pickers/shortcuts' },
+ { pathname: '/x/react-date-pickers/accessibility' },
],
},
{
@@ -357,8 +380,8 @@ const pages: MuiPage[] = [
],
},
{
- pathname: '/x/react-date-pickers/visual-customization',
- subheader: 'Visual customization',
+ pathname: '/x/react-date-pickers/customization-group',
+ subheader: 'Customization',
children: [
{
pathname: '/x/react-date-pickers/custom-components',
@@ -370,6 +393,17 @@ const pages: MuiPage[] = [
{ pathname: '/x/react-date-pickers/playground', title: 'Customization playground' },
],
},
+ {
+ pathname: '/x/api/picker-resources',
+ subheader: 'Resources',
+ children: [
+ {
+ pathname: '/x/api/date-pickers-group',
+ title: 'API reference',
+ children: [{ pathname: '/x/api/date-pickers', title: 'Index' }, ...pickersComponentApi],
+ },
+ ],
+ },
],
},
{
@@ -380,8 +414,8 @@ const pages: MuiPage[] = [
{ pathname: '/x/react-charts', title: 'Overview' },
{ pathname: '/x/react-charts/getting-started' },
{
- pathname: '/x/react-charts-available',
- subheader: 'Available components',
+ pathname: '/x/react-chart-components',
+ subheader: 'Components',
children: [
{
pathname: '/x/react-charts-bars',
@@ -428,8 +462,8 @@ const pages: MuiPage[] = [
unstable: true,
},
{
- pathname: '/x/react-charts/common-features',
- subheader: 'Common features',
+ pathname: '/x/react-charts/main-features',
+ subheader: 'Main features',
children: [
{ pathname: '/x/react-charts/axis' },
{ pathname: '/x/react-charts/components', title: 'Custom components' },
@@ -449,19 +483,25 @@ const pages: MuiPage[] = [
],
},
{
- pathname: '/x/api/charts-group',
- title: 'API reference',
+ pathname: '/x/api/chart-resources',
+ subheader: 'Resources',
children: [
- ...chartsComponentApi,
{
- pathname: '/x/api/charts-interfaces-group',
- subheader: 'Interfaces',
+ pathname: '/x/api/charts-group',
+ title: 'API reference',
children: [
- { pathname: '/x/api/charts/axis-config', title: 'AxisConfig' },
- { pathname: '/x/api/charts/bar-series-type', title: 'BarSeriesType' },
- { pathname: '/x/api/charts/line-series-type', title: 'LineSeriesType' },
- { pathname: '/x/api/charts/pie-series-type', title: 'PieSeriesType' },
- { pathname: '/x/api/charts/scatter-series-type', title: 'ScatterSeriesType' },
+ ...chartsComponentApi,
+ {
+ pathname: '/x/api/charts-interfaces-group',
+ subheader: 'Interfaces',
+ children: [
+ { pathname: '/x/api/charts/axis-config', title: 'AxisConfig' },
+ { pathname: '/x/api/charts/bar-series-type', title: 'BarSeriesType' },
+ { pathname: '/x/api/charts/line-series-type', title: 'LineSeriesType' },
+ { pathname: '/x/api/charts/pie-series-type', title: 'PieSeriesType' },
+ { pathname: '/x/api/charts/scatter-series-type', title: 'ScatterSeriesType' },
+ ],
+ },
],
},
],
@@ -513,17 +553,23 @@ const pages: MuiPage[] = [
],
},
{
- pathname: '/x/react-tree-view/common-features',
- subheader: 'Common features',
+ pathname: '/x/react-tree-view/main-features',
+ subheader: 'Main features',
children: [
{ pathname: '/x/react-tree-view/accessibility' },
{ pathname: '/x/react-tree-view/tree-item-customization', title: 'Item customization' },
],
},
{
- pathname: '/x/api/tree-view-group',
- title: 'API reference',
- children: [...treeViewComponentApi],
+ pathname: '/x/api/tree-view-resources',
+ subheader: 'Resources',
+ children: [
+ {
+ pathname: '/x/api/tree-view-group',
+ title: 'API reference',
+ children: [...treeViewComponentApi],
+ },
+ ],
},
],
},
@@ -531,9 +577,28 @@ const pages: MuiPage[] = [
pathname: '/x/migration-group',
title: 'Migration',
children: [
+ {
+ pathname: '/x/migration-v8',
+ subheader: 'Upgrade to v8',
+ children: [
+ { pathname: '/x/migration/migration-data-grid-v7', title: 'Breaking changes: Data Grid' },
+ {
+ pathname: '/x/migration/migration-pickers-v7',
+ title: 'Breaking changes: Date and Time Pickers',
+ },
+ {
+ pathname: '/x/migration/migration-tree-view-v7',
+ title: 'Breaking changes: Tree View',
+ },
+ {
+ pathname: '/x/migration/migration-charts-v7',
+ title: 'Breaking changes: Charts',
+ },
+ ],
+ },
{
pathname: '/x/migration-v7',
- subheader: 'Upgrade to v7',
+ title: 'Upgrade to v7',
children: [
{ pathname: '/x/migration/migration-data-grid-v6', title: 'Breaking changes: Data Grid' },
{
diff --git a/docs/data/tree-view/accessibility/accessibility.md b/docs/data/tree-view/accessibility/accessibility.md
index b1fc45bfc6903..cc9c2306612bd 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/datasets/employees.ts b/docs/data/tree-view/datasets/employees.ts
new file mode 100644
index 0000000000000..2af62416f36e8
--- /dev/null
+++ b/docs/data/tree-view/datasets/employees.ts
@@ -0,0 +1,40 @@
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+
+export const EMPLOYEES_DATASET: TreeViewBaseItem[] = [
+ {
+ id: '0',
+ label: 'Sarah',
+ },
+ {
+ id: '1',
+ label: 'Thomas',
+ children: [
+ { id: '2', label: 'Robert' },
+ { id: '3', label: 'Karen' },
+ { id: '4', label: 'Nancy' },
+ { id: '5', label: 'Daniel' },
+ { id: '6', label: 'Christopher' },
+ { id: '7', label: 'Donald' },
+ ],
+ },
+ {
+ id: '8',
+ label: 'Mary',
+ children: [
+ {
+ id: '9',
+ label: 'Jennifer',
+ children: [{ id: '10', label: 'Anna' }],
+ },
+ { id: '11', label: 'Michael' },
+ {
+ id: '12',
+ label: 'Linda',
+ children: [
+ { id: '13', label: 'Elizabeth' },
+ { id: '14', label: 'William' },
+ ],
+ },
+ ],
+ },
+];
diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md
index 79dc191bdc929..6acc9e5382c17 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 64c3749656524..e1c49a7e2bd69 100644
--- a/docs/data/tree-view/overview/overview.md
+++ b/docs/data/tree-view/overview/overview.md
@@ -41,75 +41,3 @@ This is the recommended version for larger trees, as well as those that require
:::info
At the moment, the Simple and Rich Tree Views are similar in terms of feature support. But as the component grows, you can expect to see the more advanced ones appear primarily on the Rich Tree View.
:::
-
-### Tree Item components
-
-The `@mui/x-tree-view` package exposes two different components to define your tree items:
-
-- `TreeItem`
-- `TreeItem2`
-
-#### `TreeItem`
-
-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:
-
-```tsx
-import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
-import { TreeItem } from '@mui/x-tree-view/TreeItem';
-
-export default function App() {
- return (
-
-
- );
-}
-```
-
-When using `RichTreeView`,
-you don't have to import anything; it's the default component used to render the items:
-
-```tsx
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-
-export default function App() {
- return
-
- );
-}
-```
-
-When using `RichTreeView`,
-you can import it from `@mui/x-tree-view/TreeItem2` and pass it as a slot of the `RichTreeView` component:
-
-```tsx
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
-
-export default function App() {
- return {children}
{expandable &&
+
);
}
@@ -219,7 +219,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
getDragAndDropOverlayProps,
status,
publicAPI,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
const item = publicAPI.getItem(itemId);
const expandable = isExpandable(children);
@@ -231,7 +231,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
}
return (
-
+
-
-
-
+
+
{children &&
-
+
);
});
diff --git a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx
index 6711c554ba9d6..09291542de682 100644
--- a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx
@@ -14,18 +14,18 @@ import ImageIcon from '@mui/icons-material/Image';
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBack';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { treeItemClasses } from '@mui/x-tree-view/TreeItem';
-import { useTreeItem2, UseTreeItem2Parameters } from '@mui/x-tree-view/useTreeItem2';
+import { useTreeItem, UseTreeItemParameters } from '@mui/x-tree-view/useTreeItem';
import {
- TreeItem2Checkbox,
- TreeItem2Content,
- TreeItem2IconContainer,
- TreeItem2Label,
- TreeItem2Root,
-} from '@mui/x-tree-view/TreeItem2';
-import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
-import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
-import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
+ TreeItemCheckbox,
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemLabel,
+ TreeItemRoot,
+ treeItemClasses,
+} from '@mui/x-tree-view/TreeItem';
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
+import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
type FileType = 'image' | 'pdf' | 'doc' | 'video' | 'folder' | 'pinned' | 'trash';
@@ -94,7 +94,7 @@ declare module 'react' {
}
}
-const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
+const StyledTreeItemRoot = styled(TreeItemRoot)(({ theme }) => ({
color: theme.palette.grey[400],
position: 'relative',
[`& .${treeItemClasses.groupTransition}`]: {
@@ -103,9 +103,9 @@ const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
...theme.applyStyles('light', {
color: theme.palette.grey[800],
}),
-})) as unknown as typeof TreeItem2Root;
+})) as unknown as typeof TreeItemRoot;
-const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
+const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
flexDirection: 'row-reverse',
borderRadius: theme.spacing(0.7),
marginBottom: theme.spacing(0.5),
@@ -182,7 +182,7 @@ function CustomLabel({
...other
}: CustomLabelProps) {
return (
- {children}
{expandable &&
+
);
}
@@ -233,7 +233,7 @@ const getIconFromFileType = (fileType: FileType) => {
};
interface CustomTreeItemProps
- extends Omit,
+ extends Omit,
Omit, 'onFocus'> {}
const CustomTreeItem = React.forwardRef(function CustomTreeItem(
@@ -252,7 +252,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
getDragAndDropOverlayProps,
status,
publicAPI,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
const item = publicAPI.getItem(itemId);
const expandable = isExpandable(children);
@@ -264,7 +264,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
}
return (
-
+
-
-
-
+
+
{children &&
-
+
);
});
diff --git a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js
index afb1f90aec17a..5619fbf9b31d7 100644
--- a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js
+++ b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js
@@ -4,18 +4,18 @@ import Box from '@mui/material/Box';
import Avatar from '@mui/material/Avatar';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2';
+import { useTreeItem } from '@mui/x-tree-view/useTreeItem';
import {
- TreeItem2Content,
- TreeItem2IconContainer,
- TreeItem2GroupTransition,
- TreeItem2Label,
- TreeItem2Root,
- TreeItem2Checkbox,
-} from '@mui/x-tree-view/TreeItem2';
-import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
-import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
-import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemGroupTransition,
+ TreeItemLabel,
+ TreeItemRoot,
+ TreeItemCheckbox,
+} from '@mui/x-tree-view/TreeItem';
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
+import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
const ITEMS = [
{
@@ -37,7 +37,7 @@ const ITEMS = [
},
];
-const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
+const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
padding: theme.spacing(0.5, 1),
}));
@@ -53,15 +53,15 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
getGroupTransitionProps,
getDragAndDropOverlayProps,
status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
return (
-
-
+
+
-
-
+
+
({
@@ -73,14 +73,14 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
>
{label[0]}
-
-
- {children &&
-
+ {children && ,
+ extends Omit,
Omit, 'onFocus'> {}
const CustomTreeItem = React.forwardRef(function CustomTreeItem(
@@ -60,15 +60,15 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
getGroupTransitionProps,
getDragAndDropOverlayProps,
status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
return (
-
-
+
+
-
-
+
+
({
@@ -80,14 +80,14 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
>
{(label as string)[0]}
-
-
- {children &&
-
+ {children &&
,
) {
- const { interactions } = useTreeItem2Utils({
+ const { interactions } = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
- const handleInputBlur: UseTreeItem2LabelInputSlotOwnProps['onBlur'] = (event) => {
+ const handleInputBlur: UseTreeItemLabelInputSlotOwnProps['onBlur'] = (event) => {
interactions.handleCancelItemLabelEditing(event);
};
return (
-
({
...theme.typography.body1,
@@ -53,7 +53,7 @@ export const ITEMS = [
function Label({ children, ...other }) {
return (
-
{children}
-
+
);
}
@@ -136,12 +136,12 @@ const LabelInput = React.forwardRef(function LabelInput(
);
});
-const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(props, ref) {
- const { interactions } = useTreeItem2Utils({
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
+ const { interactions } = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
- const { publicAPI } = useTreeItem2(props);
+ const { publicAPI } = useTreeItem(props);
const handleInputBlur = (event) => {
event.defaultMuiPrevented = true;
@@ -152,7 +152,7 @@ const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(props, ref) {
};
return (
-
({
@@ -67,9 +63,9 @@ export const ITEMS: TreeViewBaseItem[] = [
},
];
-function Label({ children, ...other }: UseTreeItem2LabelSlotOwnProps) {
+function Label({ children, ...other }: UseTreeItemLabelSlotOwnProps) {
return (
-
{children}
-
+
);
}
-interface CustomLabelInputProps extends UseTreeItem2LabelInputSlotOwnProps {
+interface CustomLabelInputProps extends UseTreeItemLabelInputSlotOwnProps {
handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
handleSaveItemLabel: (event: React.SyntheticEvent, label: string) => void;
item: TreeViewBaseItem;
@@ -163,28 +159,28 @@ const LabelInput = React.forwardRef(function LabelInput(
);
});
-const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(
- props: TreeItem2Props,
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+ props: TreeItemProps,
ref: React.Ref,
) {
- const { interactions } = useTreeItem2Utils({
+ const { interactions } = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
- const { publicAPI } = useTreeItem2(props);
+ const { publicAPI } = useTreeItem(props);
- const handleInputBlur: UseTreeItem2LabelInputSlotOwnProps['onBlur'] = (event) => {
+ const handleInputBlur: UseTreeItemLabelInputSlotOwnProps['onBlur'] = (event) => {
event.defaultMuiPrevented = true;
};
- const handleInputKeyDown: UseTreeItem2LabelInputSlotOwnProps['onKeyDown'] = (
+ const handleInputKeyDown: UseTreeItemLabelInputSlotOwnProps['onKeyDown'] = (
event,
) => {
event.defaultMuiPrevented = true;
};
return (
-
-
void;
@@ -32,7 +28,7 @@ function CustomLabel({
...other
}: CustomLabelProps) {
return (
-
)}
-
+
);
}
-interface CustomLabelInputProps extends UseTreeItem2LabelInputSlotOwnProps {
+interface CustomLabelInputProps extends UseTreeItemLabelInputSlotOwnProps {
handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
handleSaveItemLabel: (event: React.SyntheticEvent, label: string) => void;
value: string;
@@ -68,7 +64,7 @@ function CustomLabelInput(props: Omit) {
return (
- ) {
);
}
-const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(
- props: TreeItem2Props,
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+ props: TreeItemProps,
ref: React.Ref,
) {
- const { interactions, status } = useTreeItem2Utils({
+ const { interactions, status } = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
- const handleContentDoubleClick: UseTreeItem2LabelSlotOwnProps['onDoubleClick'] = (
+ const handleContentDoubleClick: UseTreeItemLabelSlotOwnProps['onDoubleClick'] = (
event,
) => {
event.defaultMuiPrevented = true;
};
- const handleInputBlur: UseTreeItem2LabelInputSlotOwnProps['onBlur'] = (event) => {
+ const handleInputBlur: UseTreeItemLabelInputSlotOwnProps['onBlur'] = (event) => {
event.defaultMuiPrevented = true;
};
- const handleInputKeyDown: UseTreeItem2LabelInputSlotOwnProps['onKeyDown'] = (
+ const handleInputKeyDown: UseTreeItemLabelInputSlotOwnProps['onKeyDown'] = (
event,
) => {
event.defaultMuiPrevented = true;
};
return (
-
-
) {
return (
-
) {
);
}
-const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(
- props: TreeItem2Props,
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+ props: TreeItemProps,
ref: React.Ref,
) {
const [error, setError] = React.useState(null);
- const { interactions } = useTreeItem2Utils({
+ const { interactions } = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
@@ -57,13 +57,13 @@ const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(
}
};
- const handleInputBlur: UseTreeItem2LabelInputSlotOwnProps['onBlur'] = (event) => {
+ const handleInputBlur: UseTreeItemLabelInputSlotOwnProps['onBlur'] = (event) => {
if (error) {
event.defaultMuiPrevented = true;
}
};
- const handleInputKeyDown: UseTreeItem2LabelInputSlotOwnProps['onKeyDown'] = (
+ const handleInputKeyDown: UseTreeItemLabelInputSlotOwnProps['onKeyDown'] = (
event,
) => {
event.defaultMuiPrevented = true;
@@ -86,7 +86,7 @@ const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(
};
return (
-
Create your custom tree view.
+{children}
{expandable &&
+
);
}
@@ -203,14 +203,14 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
getDragAndDropOverlayProps,
status,
publicAPI,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
const item = publicAPI.getItem(itemId);
const expandable = isExpandable(children);
const icon = getIconFromFileType(item.fileType);
return (
-
+
-
-
-
+
+
- {children &&
-
+
);
});
diff --git a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx
index f555c2afd64b8..5f5a0434956bc 100644
--- a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx
+++ b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx
@@ -10,19 +10,19 @@ import ImageIcon from '@mui/icons-material/Image';
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBack';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
-import { treeItemClasses } from '@mui/x-tree-view/TreeItem';
-import { useTreeItem2, UseTreeItem2Parameters } from '@mui/x-tree-view/useTreeItem2';
+import { useTreeItem, UseTreeItemParameters } from '@mui/x-tree-view/useTreeItem';
import {
- TreeItem2Checkbox,
- TreeItem2Content,
- TreeItem2IconContainer,
- TreeItem2Label,
- TreeItem2Root,
- TreeItem2GroupTransition,
-} from '@mui/x-tree-view/TreeItem2';
-import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
-import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
-import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
+ TreeItemCheckbox,
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemLabel,
+ TreeItemRoot,
+ TreeItemGroupTransition,
+ treeItemClasses,
+} from '@mui/x-tree-view/TreeItem';
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
+import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
@@ -94,7 +94,7 @@ declare module 'react' {
}
}
-const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
+const StyledTreeItemRoot = styled(TreeItemRoot)(({ theme }) => ({
color: theme.palette.grey[400],
position: 'relative',
[`& .${treeItemClasses.groupTransition}`]: {
@@ -103,8 +103,8 @@ const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
...theme.applyStyles('light', {
color: theme.palette.grey[800],
}),
-})) as unknown as typeof TreeItem2Root;
-const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
+})) as unknown as typeof TreeItemRoot;
+const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
flexDirection: 'row-reverse',
borderRadius: theme.spacing(0.7),
marginBottom: theme.spacing(0.5),
@@ -167,7 +167,7 @@ function CustomLabel({
...other
}: CustomLabelProps) {
return (
- {children}
{expandable &&
+
);
}
@@ -216,7 +216,7 @@ const getIconFromFileType = (fileType: FileType) => {
};
interface CustomTreeItemProps
- extends Omit,
+ extends Omit,
Omit, 'onFocus'> {}
const CustomTreeItem = React.forwardRef(function CustomTreeItem(
@@ -235,14 +235,14 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
getDragAndDropOverlayProps,
status,
publicAPI,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
const item = publicAPI.getItem(itemId);
const expandable = isExpandable(children);
const icon = getIconFromFileType(item.fileType);
return (
-
+
-
-
-
+
+
- {children &&
-
+
);
});
diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js
index c9f03403a38fb..500411bd806c2 100644
--- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js
+++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js
@@ -3,18 +3,18 @@ import Box from '@mui/material/Box';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
-import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2';
+import { useTreeItem } from '@mui/x-tree-view/useTreeItem';
import {
- TreeItem2Content,
- TreeItem2IconContainer,
- TreeItem2GroupTransition,
- TreeItem2Label,
- TreeItem2Root,
- TreeItem2Checkbox,
-} from '@mui/x-tree-view/TreeItem2';
-import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
-import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
-import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemGroupTransition,
+ TreeItemLabel,
+ TreeItemRoot,
+ TreeItemCheckbox,
+} from '@mui/x-tree-view/TreeItem';
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
+import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
const MUI_X_PRODUCTS = [
{
@@ -58,7 +58,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
getGroupTransitionProps,
getDragAndDropOverlayProps,
status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
const { draggable, onDragStart, onDragOver, onDragEnd, ...otherRootProps } =
getRootProps(other);
@@ -73,27 +73,27 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
};
return (
-
-
-
-
-
-
+
+
+
+
+
-
- {children &&
-
+
+ ,
+ extends Omit,
Omit, 'onFocus'> {}
const CustomTreeItem = React.forwardRef(function CustomTreeItem(
@@ -65,7 +65,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
getGroupTransitionProps,
getDragAndDropOverlayProps,
status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
const { draggable, onDragStart, onDragOver, onDragEnd, ...otherRootProps } =
getRootProps(other);
@@ -84,27 +84,27 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
};
return (
-
-
-
-
-
-
+
+
+
+
+
-
- {children &&
-
+
+
-
- );
-}
diff --git a/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.tsx b/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.tsx
deleted file mode 100644
index e45bdbb4fb3c3..0000000000000
--- a/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
-import { TreeViewBaseItem } from '@mui/x-tree-view/models';
-
-const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
- {
- id: 'grid',
- label: 'Data Grid',
- children: [
- { id: 'grid-community', label: '@mui/x-data-grid' },
- { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
- { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
- ],
- },
- {
- id: 'pickers',
- label: 'Date and Time Pickers',
- children: [
- { id: 'pickers-community', label: '@mui/x-date-pickers' },
- { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
- ],
- },
- {
- id: 'charts',
- label: 'Charts',
- children: [{ id: 'charts-community', label: '@mui/x-charts' }],
- },
- {
- id: 'tree-view',
- label: 'Tree View',
- children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
- },
-];
-
-function getItemDescendantsIds(item: TreeViewBaseItem) {
- const ids: string[] = [];
- item.children?.forEach((child) => {
- ids.push(child.id);
- ids.push(...getItemDescendantsIds(child));
- });
-
- return ids;
-}
-
-export default function ParentChildrenSelectionRelationship() {
- const [selectedItems, setSelectedItems] = React.useState([]);
- const toggledItemRef = React.useRef<{ [itemId: string]: boolean }>({});
- const apiRef = useTreeViewApiRef();
-
- const handleItemSelectionToggle = (
- event: React.SyntheticEvent,
- itemId: string,
- isSelected: boolean,
- ) => {
- toggledItemRef.current[itemId] = isSelected;
- };
-
- const handleSelectedItemsChange = (
- event: React.SyntheticEvent,
- newSelectedItems: string[],
- ) => {
- setSelectedItems(newSelectedItems);
-
- // Select / unselect the children of the toggled item
- const itemsToSelect: string[] = [];
- const itemsToUnSelect: { [itemId: string]: boolean } = {};
- Object.entries(toggledItemRef.current).forEach(([itemId, isSelected]) => {
- const item = apiRef.current!.getItem(itemId);
- if (isSelected) {
- itemsToSelect.push(...getItemDescendantsIds(item));
- } else {
- getItemDescendantsIds(item).forEach((descendantId) => {
- itemsToUnSelect[descendantId] = true;
- });
- }
- });
-
- const newSelectedItemsWithChildren = Array.from(
- new Set(
- [...newSelectedItems, ...itemsToSelect].filter(
- (itemId) => !itemsToUnSelect[itemId],
- ),
- ),
- );
-
- setSelectedItems(newSelectedItemsWithChildren);
-
- toggledItemRef.current = {};
- };
-
- return (
-
-
- );
-}
diff --git a/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.tsx.preview b/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.tsx.preview
deleted file mode 100644
index 6fa38db9c231b..0000000000000
--- a/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-({
+ parents: true,
+ descendants: true,
+ });
+
+ return (
+ ;
```
-When your component first renders, `apiRef` will be `undefined`.
+When your component first renders, `apiRef` is `undefined`.
After this initial render, `apiRef` holds methods to interact imperatively with the Tree View.
:::
### Select or deselect an item
-Use the `selectItem` API method to select or deselect an item:
+Use the `selectItem()` API method to select or deselect an item:
```ts
apiRef.current.selectItem({
diff --git a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js
index 7dc64dbbe9b04..b12875731714d 100644
--- a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js
+++ b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js
@@ -15,20 +15,20 @@ import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import {
- TreeItem2Content,
- TreeItem2IconContainer,
- TreeItem2Root,
- TreeItem2GroupTransition,
-} from '@mui/x-tree-view/TreeItem2';
-import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2';
-import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
-import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemRoot,
+ TreeItemGroupTransition,
+} from '@mui/x-tree-view/TreeItem';
+import { useTreeItem } from '@mui/x-tree-view/useTreeItem';
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
-const CustomTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
+const CustomTreeItemRoot = styled(TreeItemRoot)(({ theme }) => ({
color: theme.palette.text.secondary,
}));
-const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
+const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
marginBottom: theme.spacing(0.3),
color: theme.palette.text.secondary,
borderRadius: theme.spacing(2),
@@ -46,11 +46,11 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
},
}));
-const CustomTreeItemIconContainer = styled(TreeItem2IconContainer)(({ theme }) => ({
+const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => ({
marginRight: theme.spacing(1),
}));
-const CustomTreeItemGroupTransition = styled(TreeItem2GroupTransition)(
+const CustomTreeItemGroupTransition = styled(TreeItemGroupTransition)(
({ theme }) => ({
marginLeft: 0,
[`& .content`]: {
@@ -83,7 +83,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
getLabelProps,
getGroupTransitionProps,
status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
const style = {
'--tree-view-color': theme.palette.mode !== 'dark' ? color : colorForDarkMode,
@@ -92,7 +92,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
};
return (
-
+
-
-
+
);
});
diff --git a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx
index 88d4d92db4535..c2c669a251828 100644
--- a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx
+++ b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx
@@ -15,14 +15,14 @@ import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import { SvgIconProps } from '@mui/material/SvgIcon';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import {
- TreeItem2Content,
- TreeItem2IconContainer,
- TreeItem2Root,
- TreeItem2GroupTransition,
-} from '@mui/x-tree-view/TreeItem2';
-import { useTreeItem2, UseTreeItem2Parameters } from '@mui/x-tree-view/useTreeItem2';
-import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
-import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemRoot,
+ TreeItemGroupTransition,
+} from '@mui/x-tree-view/TreeItem';
+import { useTreeItem, UseTreeItemParameters } from '@mui/x-tree-view/useTreeItem';
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
declare module 'react' {
interface CSSProperties {
@@ -32,7 +32,7 @@ declare module 'react' {
}
interface StyledTreeItemProps
- extends Omit,
+ extends Omit,
React.HTMLAttributes {
bgColor?: string;
bgColorForDarkMode?: string;
@@ -42,11 +42,11 @@ interface StyledTreeItemProps
labelInfo?: string;
}
-const CustomTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
+const CustomTreeItemRoot = styled(TreeItemRoot)(({ theme }) => ({
color: theme.palette.text.secondary,
}));
-const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
+const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
marginBottom: theme.spacing(0.3),
color: theme.palette.text.secondary,
borderRadius: theme.spacing(2),
@@ -64,11 +64,11 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
},
}));
-const CustomTreeItemIconContainer = styled(TreeItem2IconContainer)(({ theme }) => ({
+const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => ({
marginRight: theme.spacing(1),
}));
-const CustomTreeItemGroupTransition = styled(TreeItem2GroupTransition)(
+const CustomTreeItemGroupTransition = styled(TreeItemGroupTransition)(
({ theme }) => ({
marginLeft: 0,
[`& .content`]: {
@@ -104,7 +104,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
getLabelProps,
getGroupTransitionProps,
status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
const style = {
'--tree-view-color': theme.palette.mode !== 'dark' ? color : colorForDarkMode,
@@ -113,7 +113,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
};
return (
-
+
-
-
+
);
});
diff --git a/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js
index c6e2012740160..b8af5dff4380d 100644
--- a/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js
+++ b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js
@@ -3,19 +3,19 @@ import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Avatar from '@mui/material/Avatar';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
-import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2';
+import { useTreeItem } from '@mui/x-tree-view/useTreeItem';
import {
- TreeItem2Content,
- TreeItem2IconContainer,
- TreeItem2GroupTransition,
- TreeItem2Label,
- TreeItem2Root,
- TreeItem2Checkbox,
-} from '@mui/x-tree-view/TreeItem2';
-import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
-import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemGroupTransition,
+ TreeItemLabel,
+ TreeItemRoot,
+ TreeItemCheckbox,
+} from '@mui/x-tree-view/TreeItem';
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
-const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
+const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
padding: theme.spacing(0.5, 1),
}));
@@ -30,16 +30,16 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
getLabelProps,
getGroupTransitionProps,
status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
return (
-
-
+
+
-
-
-
+
+
({
@@ -51,12 +51,12 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
>
{label[0]}
-
- {children &&
-
+ {children && ,
+ extends Omit,
Omit, 'onFocus'> {}
const CustomTreeItem = React.forwardRef(function CustomTreeItem(
@@ -37,16 +37,16 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
getLabelProps,
getGroupTransitionProps,
status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
return (
-
-
+
+
-
-
-
+
+
({
@@ -58,12 +58,12 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
>
{(label as string)[0]}
-
- {children &&
-
+ {children && {children} ;
```
-When your component first renders, `apiRef` will be `undefined`.
+When your component first renders, `apiRef` is `undefined`.
After this initial render, `apiRef` holds methods to interact imperatively with the Tree View.
:::
### Get an item's DOM element by ID
-Use the `getItemDOMElement` API method to get an item's DOM element by its ID.
+Use the `getItemDOMElement()` API method to get an item's DOM element by its ID.
```ts
const itemElement = apiRef.current.getItemDOMElement(
diff --git a/docs/data/tree-view/simple-tree-view/selection/selection.md b/docs/data/tree-view/simple-tree-view/selection/selection.md
index aceb02cb7215d..c9f44a4e63efc 100644
--- a/docs/data/tree-view/simple-tree-view/selection/selection.md
+++ b/docs/data/tree-view/simple-tree-view/selection/selection.md
@@ -91,7 +91,7 @@ After this initial render, `apiRef` holds methods to interact imperatively with
### Select or deselect an item
-Use the `selectItem` API method to select or deselect an item:
+Use the `selectItem()` API method to select or deselect an item:
```ts
apiRef.current.selectItem({
diff --git a/docs/data/tree-view/tree-item-customization/CheckboxSlot.js b/docs/data/tree-view/tree-item-customization/CheckboxSlot.js
index 81245357631ee..fe14e7b79ae3c 100644
--- a/docs/data/tree-view/tree-item-customization/CheckboxSlot.js
+++ b/docs/data/tree-view/tree-item-customization/CheckboxSlot.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
import { MUI_X_PRODUCTS } from './products';
const CustomCheckbox = React.forwardRef(function CustomCheckbox(props, ref) {
@@ -10,7 +10,7 @@ const CustomCheckbox = React.forwardRef(function CustomCheckbox(props, ref) {
const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
return (
- ,
) {
return (
- ,
) {
return (
- ({
@@ -17,14 +17,14 @@ const CustomContent = styled('div')(({ theme }) => ({
},
variants: [
{
- props: ({ status }: UseTreeItem2ContentSlotOwnProps) => status.disabled,
+ props: ({ status }: UseTreeItemContentSlotOwnProps) => status.disabled,
style: {
opacity: 0.5,
backgroundColor: theme.palette.action.disabledBackground,
},
},
{
- props: ({ status }: UseTreeItem2ContentSlotOwnProps) => status.selected,
+ props: ({ status }: UseTreeItemContentSlotOwnProps) => status.selected,
style: {
backgroundColor: alpha((theme.vars || theme).palette.primary.main, 0.4),
},
@@ -33,11 +33,11 @@ const CustomContent = styled('div')(({ theme }) => ({
}));
const CustomTreeItem = React.forwardRef(function CustomTreeItem(
- props: TreeItem2Props,
+ props: TreeItemProps,
ref: React.Ref,
) {
return (
- ,
) {
return (
-
-
-
+
-
-
-
-
+
{children && (
-
-
+
+
({
fontSize: theme.typography.pxToRem(11),
}));
-const CustomTreeItem2Transition = styled(TreeItem2GroupTransition)(({ theme }) => ({
+const CustomTreeItemTransition = styled(TreeItemGroupTransition)(({ theme }) => ({
padding: 6,
border: '1px solid transparent',
'&:hover:not(:has(:hover))': {
@@ -48,34 +48,34 @@ const CustomTreeItem2Transition = styled(TreeItem2GroupTransition)(({ theme }) =
},
}));
-const CustomTreeItem2LabelInput = styled(TreeItem2LabelInput)(({ theme }) => ({
+const CustomTreeItemLabelInput = styled(TreeItemLabelInput)(({ theme }) => ({
color: theme.palette.text.primary,
border: '1px solid transparent',
'&:hover': {
borderColor: theme.palette.primary.main,
},
}));
-const CustomTreeItem2Content = styled(TreeItem2Content)(({ theme }) => ({
+const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
border: '1px solid transparent',
'&:hover:not(:has(:hover))': {
borderColor: theme.palette.primary.main,
},
}));
-const CustomTreeItem2IconContainer = styled(TreeItem2IconContainer)(({ theme }) => ({
+const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => ({
borderRadius: theme.shape.borderRadius,
border: '1px solid transparent',
'&:hover': {
borderColor: theme.palette.primary.main,
},
}));
-const CustomTreeItem2Label = styled(TreeItem2Label)(({ theme }) => ({
+const CustomTreeItemLabel = styled(TreeItemLabel)(({ theme }) => ({
borderRadius: theme.shape.borderRadius,
border: '1px solid transparent',
'&:hover': {
borderColor: theme.palette.primary.main,
},
}));
-const CustomTreeItem2Checkbox = styled(TreeItem2Checkbox)(({ theme }) => ({
+const CustomTreeItemCheckbox = styled(TreeItemCheckbox)(({ theme }) => ({
borderRadius: theme.shape.borderRadius,
border: '1px solid transparent',
'&:hover': {
@@ -84,7 +84,7 @@ const CustomTreeItem2Checkbox = styled(TreeItem2Checkbox)(({ theme }) => ({
}));
interface CustomTreeItemProps
- extends Omit,
+ extends Omit,
Omit, 'onFocus'> {}
const CustomTreeItem = React.forwardRef(function CustomTreeItem(
@@ -112,65 +112,65 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
getDragAndDropOverlayProps,
getLabelInputProps,
status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
return (
-
-
+
-
-
-
-
+
{children && (
-
-
+
+
,
) {
- const { interactions } = useTreeItem2Utils({
+ const { interactions } = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
@@ -23,7 +23,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
// Do something when the checkbox is clicked
};
- const handleCheckboxOnChange: UseTreeItem2CheckboxSlotOwnProps['onChange'] = (
+ const handleCheckboxOnChange: UseTreeItemCheckboxSlotOwnProps['onChange'] = (
event,
) => {
event.defaultMuiPrevented = true;
@@ -32,13 +32,13 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
};
return (
-
-
+
+
{status.expandable && (
)}
-
-
- {children &&
-
+
+
+ {children && ,
) {
const {
@@ -28,9 +28,9 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
getGroupTransitionProps,
getDragAndDropOverlayProps,
status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
- const { interactions } = useTreeItem2Utils({
+ const { interactions } = useTreeItemUtils({
itemId,
children,
});
@@ -40,8 +40,8 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
};
return (
-
-
+
+
{status.expandable && (
)}
-
-
+
- {children &&
-
+ ;
}
@@ -46,14 +46,14 @@ function CustomLabel({ children, status, onClick, ...props }: CustomLabelProps)
}
const CustomTreeItem = React.forwardRef(function CustomTreeItem(
- props: TreeItem2Props,
+ props: TreeItemProps,
ref: React.Ref,
) {
- const { interactions, status } = useTreeItem2Utils({
+ const { interactions, status } = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
- const handleContentClick: UseTreeItem2ContentSlotOwnProps['onClick'] = (event) => {
+ const handleContentClick: UseTreeItemContentSlotOwnProps['onClick'] = (event) => {
event.defaultMuiPrevented = true;
};
@@ -62,7 +62,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
};
return (
- ,
) {
- const { publicAPI } = useTreeItem2Utils({
+ const { publicAPI } = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
@@ -95,7 +95,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
const item = publicAPI.getItem(props.itemId);
return (
- ,
) {
return (
-
-
-
-{{"component": "modules/components/TreeItem2Anatomy.js"}}
+
+
+
+
+
+
### Content
@@ -81,12 +83,11 @@ 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
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:
```ts
-const CustomTreeItem2GroupTransition = styled(TreeItem2GroupTransition)(({ theme }) => ({
+const CustomTreeItemGroupTransition = styled(TreeItemGroupTransition)(({ theme }) => ({
// ...other styles
paddingLeft: `var(--TreeView-itemChildrenIndentation)`,
}
@@ -95,7 +96,7 @@ const CustomTreeItem2GroupTransition = styled(TreeItem2GroupTransition)(({ theme
If you are using the `indentationAtItemLevel` prop, then instead apply the following padding to your `content` element:
```ts
-const CustomTreeItem2Content = styled(TreeItem2Content)(({ theme }) => ({
+const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
// ...other styles
paddingLeft:
`calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
@@ -116,12 +117,11 @@ 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.
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:
```ts
-const CustomTreeItem2Content = styled(TreeItem2Content)(({ theme }) => ({
+const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
// ...other styles
paddingLeft:
`calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
@@ -132,19 +132,19 @@ const CustomTreeItem2Content = styled(TreeItem2Content)(({ theme }) => ({
## Hooks
-### useTreeItem2
+### useTreeItem
-The `useTreeItem2` hook lets you manage and customize individual Tree Items.
+The `useTreeItem` hook lets you manage and customize individual Tree Items.
You can use it to get the properties needed for all slots, the status of any given Item, or to tap into the interactive API of the Tree View.
#### Slot properties
-The `useTreeItem2` hook gives you granular control over an Item's layout by providing resolvers to get the appropriate props for each slot.
+The `useTreeItem` hook gives you granular control over an Item's layout by providing resolvers to get the appropriate props for each slot.
This makes it possible to build a fully custom layout for your Tree Items.
The demo below shows how to get the props needed for each slot, and how to pass them correctly.
-{{"demo": "useTreeItem2HookProperties.js"}}
+{{"demo": "useTreeItemHookProperties.js"}}
You can pass additional props to a slot—or override existing slots—by passing an object argument to the slot's props resolver, as shown below:
@@ -159,34 +159,34 @@ You can pass additional props to a slot—or override existing slots—by passin
#### Item status
-The `useTreeItem2` hook also returns a `status` object that holds boolean values for each possible state of a Tree Item.
+The `useTreeItem` hook also returns a `status` object that holds boolean values for each possible state of a Tree Item.
```jsx
const {
status: { expanded, expandable, focused, selected, disabled, editable, editing },
-} = useTreeItem2(props);
+} = useTreeItem(props);
```
You can use these statuses to apply custom styling to the item or conditionally render subcomponents.
-{{"demo": "useTreeItem2HookStatus.js"}}
+{{"demo": "useTreeItemHookStatus.js"}}
#### Imperative API
The `publicAPI` object provides a number of methods to programmatically interact with the Tree View.
-You can use the `useTreeItem2` hook to access the `publicAPI` object from within a Tree Item.
+You can use the `useTreeItem` hook to access the `publicAPI` object from within a Tree Item.
-{{"demo": "useTreeItem2HookPublicAPI.js"}}
+{{"demo": "useTreeItemHookPublicAPI.js"}}
See the **Imperative API** section on each feature page to learn more about the public API methods available on the Tree View.
-### `useTreeItem2Utils`
+### `useTreeItemUtils`
-The `useTreeItem2Utils` hook provides a set of interaction methods for implementing custom behaviors for the Tree View.
+The `useTreeItemUtils` hook provides a set of interaction methods for implementing custom behaviors for the Tree View.
It also returns the status of the Item.
```jsx
-const { interactions, status } = useTreeItem2Utils({
+const { interactions, status } = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
@@ -225,7 +225,7 @@ The demo below shows how to introduce a new element that expands and collapses t
#### Label editing
-The `useTreeItem2Utils` hook provides the following interaction methods relevant to label editing behavior:
+The `useTreeItemUtils` hook provides the following interaction methods relevant to label editing behavior:
```jsx
const {
@@ -234,7 +234,7 @@ const {
handleCancelItemLabelEditing,
handleSaveItemLabel,
},
-} = useTreeItem2Utils({
+} = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
diff --git a/docs/data/tree-view/tree-item-customization/useTreeItem2HookProperties.js b/docs/data/tree-view/tree-item-customization/useTreeItem2HookProperties.js
deleted file mode 100644
index b93e60f39e001..0000000000000
--- a/docs/data/tree-view/tree-item-customization/useTreeItem2HookProperties.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2';
-import {
- TreeItem2Checkbox,
- TreeItem2Content,
- TreeItem2IconContainer,
- TreeItem2Label,
- TreeItem2Root,
- TreeItem2GroupTransition,
-} from '@mui/x-tree-view/TreeItem2';
-import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
-import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
-import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
-import { TreeItem2LabelInput } from '@mui/x-tree-view/TreeItem2LabelInput';
-import { MUI_X_PRODUCTS } from './products';
-
-const CustomTreeItem = React.forwardRef(function CustomTreeItem(
- { id, itemId, label, disabled, children },
- ref,
-) {
- const {
- getRootProps,
- getContentProps,
- getIconContainerProps,
- getCheckboxProps,
- getLabelProps,
- getLabelInputProps,
- getGroupTransitionProps,
- getDragAndDropOverlayProps,
- status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
-
- return (
-
-
-
-
-
-
- {children &&
-
- );
-});
-
-export default function useTreeItem2HookProperties() {
- return (
-
-
- );
-}
diff --git a/docs/data/tree-view/tree-item-customization/useTreeItem2HookProperties.tsx b/docs/data/tree-view/tree-item-customization/useTreeItem2HookProperties.tsx
deleted file mode 100644
index e2ec284be456a..0000000000000
--- a/docs/data/tree-view/tree-item-customization/useTreeItem2HookProperties.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2';
-import {
- TreeItem2Checkbox,
- TreeItem2Content,
- TreeItem2IconContainer,
- TreeItem2Label,
- TreeItem2Root,
- TreeItem2Props,
- TreeItem2GroupTransition,
-} from '@mui/x-tree-view/TreeItem2';
-import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
-import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
-import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
-import { TreeItem2LabelInput } from '@mui/x-tree-view/TreeItem2LabelInput';
-import { MUI_X_PRODUCTS } from './products';
-
-const CustomTreeItem = React.forwardRef(function CustomTreeItem(
- { id, itemId, label, disabled, children }: TreeItem2Props,
- ref: React.Ref,
-) {
- const {
- getRootProps,
- getContentProps,
- getIconContainerProps,
- getCheckboxProps,
- getLabelProps,
- getLabelInputProps,
- getGroupTransitionProps,
- getDragAndDropOverlayProps,
- status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
-
- return (
-
-
-
-
-
-
- {children &&
-
- );
-});
-
-export default function useTreeItem2HookProperties() {
- return (
-
-
- );
-}
diff --git a/docs/data/tree-view/tree-item-customization/useTreeItemHookProperties.js b/docs/data/tree-view/tree-item-customization/useTreeItemHookProperties.js
new file mode 100644
index 0000000000000..f9683d989e7bb
--- /dev/null
+++ b/docs/data/tree-view/tree-item-customization/useTreeItemHookProperties.js
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeItem } from '@mui/x-tree-view/useTreeItem';
+import {
+ TreeItemCheckbox,
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemLabel,
+ TreeItemRoot,
+ TreeItemGroupTransition,
+} from '@mui/x-tree-view/TreeItem';
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
+import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
+import { TreeItemLabelInput } from '@mui/x-tree-view/TreeItemLabelInput';
+import { MUI_X_PRODUCTS } from './products';
+
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+ { id, itemId, label, disabled, children },
+ ref,
+) {
+ const {
+ getRootProps,
+ getContentProps,
+ getIconContainerProps,
+ getCheckboxProps,
+ getLabelProps,
+ getLabelInputProps,
+ getGroupTransitionProps,
+ getDragAndDropOverlayProps,
+ status,
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
+
+ return (
+
+
+
+
+
+
+ {children &&
+
+ );
+});
+
+export default function useTreeItemHookProperties() {
+ return (
+
+
+ );
+}
diff --git a/docs/data/tree-view/tree-item-customization/useTreeItemHookProperties.tsx b/docs/data/tree-view/tree-item-customization/useTreeItemHookProperties.tsx
new file mode 100644
index 0000000000000..8e49e71df5474
--- /dev/null
+++ b/docs/data/tree-view/tree-item-customization/useTreeItemHookProperties.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeItem } from '@mui/x-tree-view/useTreeItem';
+import {
+ TreeItemCheckbox,
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemLabel,
+ TreeItemRoot,
+ TreeItemProps,
+ TreeItemGroupTransition,
+} from '@mui/x-tree-view/TreeItem';
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
+import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
+import { TreeItemLabelInput } from '@mui/x-tree-view/TreeItemLabelInput';
+import { MUI_X_PRODUCTS } from './products';
+
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+ { id, itemId, label, disabled, children }: TreeItemProps,
+ ref: React.Ref,
+) {
+ const {
+ getRootProps,
+ getContentProps,
+ getIconContainerProps,
+ getCheckboxProps,
+ getLabelProps,
+ getLabelInputProps,
+ getGroupTransitionProps,
+ getDragAndDropOverlayProps,
+ status,
+ } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
+
+ return (
+
+
+
+
+
+
+ {children &&
+
+ );
+});
+
+export default function useTreeItemHookProperties() {
+ return (
+
+
+ );
+}
diff --git a/docs/data/tree-view/tree-item-customization/useTreeItem2HookProperties.tsx.preview b/docs/data/tree-view/tree-item-customization/useTreeItemHookProperties.tsx.preview
similarity index 100%
rename from docs/data/tree-view/tree-item-customization/useTreeItem2HookProperties.tsx.preview
rename to docs/data/tree-view/tree-item-customization/useTreeItemHookProperties.tsx.preview
diff --git a/docs/data/tree-view/tree-item-customization/useTreeItem2HookPublicAPI.js b/docs/data/tree-view/tree-item-customization/useTreeItemHookPublicAPI.js
similarity index 84%
rename from docs/data/tree-view/tree-item-customization/useTreeItem2HookPublicAPI.js
rename to docs/data/tree-view/tree-item-customization/useTreeItemHookPublicAPI.js
index 086d8d6ff0867..72886928944de 100644
--- a/docs/data/tree-view/tree-item-customization/useTreeItem2HookPublicAPI.js
+++ b/docs/data/tree-view/tree-item-customization/useTreeItemHookPublicAPI.js
@@ -4,8 +4,8 @@ import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
-import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { useTreeItem } from '@mui/x-tree-view/useTreeItem';
import { MUI_X_PRODUCTS } from './products';
function CustomLabel({ children, className, numberOfChildren }) {
@@ -25,12 +25,12 @@ function CustomLabel({ children, className, numberOfChildren }) {
}
const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
- const { publicAPI } = useTreeItem2(props);
+ const { publicAPI } = useTreeItem(props);
const childrenNumber = publicAPI.getItemOrderedChildrenIds(props.itemId).length;
return (
-
,
) {
- const { publicAPI } = useTreeItem2(props);
+ const { publicAPI } = useTreeItem(props);
const childrenNumber = publicAPI.getItemOrderedChildrenIds(props.itemId).length;
return (
-
-
-
-
-
+
+
+
+
+
{status.editing ? (
-
@@ -123,14 +123,14 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
return null;
})}
-
- {children &&
-
+
+ {children &&
diff --git a/docs/data/tree-view/tree-item-customization/useTreeItem2HookStatus.tsx b/docs/data/tree-view/tree-item-customization/useTreeItemHookStatus.tsx
similarity index 76%
rename from docs/data/tree-view/tree-item-customization/useTreeItem2HookStatus.tsx
rename to docs/data/tree-view/tree-item-customization/useTreeItemHookStatus.tsx
index 2ea3153a42cef..d03d53ca63d01 100644
--- a/docs/data/tree-view/tree-item-customization/useTreeItem2HookStatus.tsx
+++ b/docs/data/tree-view/tree-item-customization/useTreeItemHookStatus.tsx
@@ -11,18 +11,18 @@ import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import DrawOutlinedIcon from '@mui/icons-material/DrawOutlined';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeItem2, UseTreeItem2Status } from '@mui/x-tree-view/useTreeItem2';
+import { useTreeItem, UseTreeItemStatus } from '@mui/x-tree-view/useTreeItem';
import {
- TreeItem2Content,
- TreeItem2Root,
- TreeItem2Props,
- TreeItem2GroupTransition,
- TreeItem2IconContainer,
- TreeItem2Label,
-} from '@mui/x-tree-view/TreeItem2';
-import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
-import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
-import { TreeItem2LabelInput } from '@mui/x-tree-view/TreeItem2LabelInput';
+ TreeItemContent,
+ TreeItemRoot,
+ TreeItemProps,
+ TreeItemGroupTransition,
+ TreeItemIconContainer,
+ TreeItemLabel,
+} from '@mui/x-tree-view/TreeItem';
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
+import { TreeItemLabelInput } from '@mui/x-tree-view/TreeItemLabelInput';
import { MUI_X_PRODUCTS } from './products';
function StatusLegend() {
@@ -75,7 +75,7 @@ function StatusLegend() {
}
const STATUS_ICONS: {
- [K in keyof UseTreeItem2Status]: React.ReactNode;
+ [K in keyof UseTreeItemStatus]: React.ReactNode;
} = {
focused: ,
) {
const {
@@ -98,24 +98,24 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
getIconContainerProps,
getLabelInputProps,
status,
- } = useTreeItem2({ id, itemId, label, disabled, children, rootRef: ref });
+ } = useTreeItem({ id, itemId, label, disabled, children, rootRef: ref });
return (
-
-
-
-
-
+
+
+
+
+
{status.editing ? (
-
- {(Object.keys(STATUS_ICONS) as [keyof UseTreeItem2Status]).map(
+ {(Object.keys(STATUS_ICONS) as [keyof UseTreeItemStatus]).map(
(iconKey, index) => {
if (status[iconKey]) {
return (
@@ -128,14 +128,14 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
},
)}
-
- {children &&
-
+
+ {children &&
diff --git a/docs/data/tree-view/tree-item-customization/useTreeItem2HookStatus.tsx.preview b/docs/data/tree-view/tree-item-customization/useTreeItemHookStatus.tsx.preview
similarity index 100%
rename from docs/data/tree-view/tree-item-customization/useTreeItem2HookStatus.tsx.preview
rename to docs/data/tree-view/tree-item-customization/useTreeItemHookStatus.tsx.preview
diff --git a/docs/data/tree-view-component-api-pages.ts b/docs/data/treeViewApiPages.ts
similarity index 65%
rename from docs/data/tree-view-component-api-pages.ts
rename to docs/data/treeViewApiPages.ts
index c46698f0ed3dd..b503ea53e2c8b 100644
--- a/docs/data/tree-view-component-api-pages.ts
+++ b/docs/data/treeViewApiPages.ts
@@ -1,6 +1,6 @@
import type { MuiPage } from 'docs/src/MuiPage';
-const apiPages: MuiPage[] = [
+const treeViewApiPages: MuiPage[] = [
{
pathname: '/x/api/tree-view/rich-tree-view',
title: 'RichTreeView',
@@ -19,12 +19,16 @@ const apiPages: MuiPage[] = [
title: 'TreeItem',
},
{
- pathname: '/x/api/tree-view/tree-item-2',
- title: 'TreeItem2',
+ pathname: '/x/api/tree-view/tree-item-drag-and-drop-overlay',
+ title: 'TreeItemDragAndDropOverlay',
+ },
+ {
+ pathname: '/x/api/tree-view/tree-item-icon',
+ title: 'TreeItemIcon',
},
{
pathname: '/x/api/tree-view/tree-view',
title: 'TreeView',
},
];
-export default apiPages;
+export default treeViewApiPages;
diff --git a/docs/package.json b/docs/package.json
index f1559e60742dc..4e7d0638b4abd 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,7 +9,7 @@
"build:clean": "rimraf .next && pnpm build",
"build-sw": "node ./scripts/buildServiceWorker.js",
"dev": "next dev --port 3001",
- "deploy": "git push -f upstream master:docs-v7",
+ "deploy": "git push -f upstream master:docs-next",
"icons": "rimraf public/static/icons/* && node ./scripts/buildIcons.js",
"serve": "serve ./export -l 3010",
"create-playground": "cpy --cwd=scripts playground.template.tsx ../../pages/playground --rename=index.tsx",
@@ -19,15 +19,15 @@
"populate:demos": "tsx scripts/populatePickersDemos"
},
"dependencies": {
- "@babel/core": "^7.25.8",
- "@babel/runtime": "^7.25.7",
- "@babel/runtime-corejs2": "^7.25.7",
+ "@babel/core": "^7.26.0",
+ "@babel/runtime": "^7.26.0",
+ "@babel/runtime-corejs2": "^7.26.0",
"@docsearch/react": "^3.6.2",
"@emotion/cache": "^11.13.1",
"@emotion/react": "^11.13.3",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.13.0",
- "@mui/docs": "6.1.2",
+ "@mui/docs": "6.1.6",
"@mui/icons-material": "^5.16.7",
"@mui/joy": "^5.0.0-beta.48",
"@mui/lab": "^5.0.0-alpha.173",
@@ -46,7 +46,7 @@
"@mui/x-date-pickers-pro": "workspace:*",
"@mui/x-tree-view": "workspace:*",
"@react-spring/web": "^9.7.5",
- "@tanstack/query-core": "^5.59.13",
+ "@tanstack/query-core": "^5.59.16",
"ast-types": "^0.14.2",
"autoprefixer": "^10.4.20",
"babel-plugin-module-resolver": "^5.0.2",
@@ -76,7 +76,7 @@
"moment-hijri": "^2.30.0",
"moment-jalaali": "^0.10.1",
"moment-timezone": "^0.5.46",
- "next": "^14.2.15",
+ "next": "^14.2.16",
"nprogress": "^0.2.0",
"postcss": "^8.4.47",
"prismjs": "^1.29.0",
@@ -84,13 +84,14 @@
"react": "^18.3.1",
"react-docgen": "^5.4.3",
"react-dom": "^18.3.1",
- "react-hook-form": "^7.53.0",
+ "react-hook-form": "^7.53.1",
"react-is": "^18.3.1",
"react-router": "^6.27.0",
"react-router-dom": "^6.27.0",
"react-runner": "^1.0.5",
"react-simple-code-editor": "^0.14.1",
"recast": "^0.23.9",
+ "rifm": "0.12.1",
"rimraf": "^6.0.1",
"rxjs": "^7.8.1",
"styled-components": "^6.1.13",
@@ -99,16 +100,16 @@
"webpack-bundle-analyzer": "^4.10.2"
},
"devDependencies": {
- "@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",
+ "@babel/plugin-transform-react-constant-elements": "^7.25.9",
+ "@babel/preset-typescript": "^7.26.0",
+ "@mui/internal-docs-utils": "^1.0.15",
+ "@mui/internal-scripts": "^1.0.26",
"@types/chance": "^1.1.6",
"@types/d3-scale": "^4.0.8",
"@types/d3-scale-chromatic": "^3.0.3",
"@types/doctrine": "^0.0.9",
"@types/gtag.js": "^0.0.20",
- "@types/lodash": "^4.17.10",
+ "@types/lodash": "^4.17.12",
"@types/luxon": "^3.4.2",
"@types/moment-hijri": "^2.1.4",
"@types/moment-jalaali": "^0.7.9",
@@ -118,6 +119,6 @@
"@types/stylis": "^4.2.6",
"@types/webpack-bundle-analyzer": "^4.7.0",
"gm": "^1.25.0",
- "serve": "^14.2.3"
+ "serve": "^14.2.4"
}
}
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 08a025daad506..8f1471a414c70 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -30,9 +30,9 @@ LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE);
function getMuiPackageVersion(packageName, commitRef) {
if (commitRef === undefined) {
// #default-branch-switch
- // Use the "latest" npm tag for the master git branch
- // Use the "next" npm tag for the next git branch
- return 'latest';
+ // Use the "next" tag for the master git branch after we start working on the next major version
+ // Once the major release is finished we can go back to "latest"
+ return 'next';
}
const shortSha = commitRef.slice(0, 8);
return `https://pkg.csb.dev/mui/mui-x/commit/${shortSha}/@mui/${packageName}`;
@@ -53,7 +53,7 @@ ponyfillGlobal.muiDocConfig = {
return newDeps;
},
csbGetVersions: (versions, { muiCommitRef }) => {
- const output = {
+ return {
...versions,
'@mui/x-data-grid': getMuiPackageVersion('x-data-grid', muiCommitRef),
'@mui/x-data-grid-pro': getMuiPackageVersion('x-data-grid-pro', muiCommitRef),
@@ -68,7 +68,6 @@ ponyfillGlobal.muiDocConfig = {
'@mui/x-internals': getMuiPackageVersion('x-internals', muiCommitRef),
exceljs: 'latest',
};
- return output;
},
postProcessImport,
};
@@ -206,17 +205,34 @@ function AppWrapper(props) {
const pageContextValue = React.useMemo(() => {
const { activePage, activePageParents } = findActivePage(pages, router.pathname);
const languagePrefix = pageProps.userLanguage === 'en' ? '' : `/${pageProps.userLanguage}`;
+ const productIdSubpathMap = {
+ introduction: '/x/introduction',
+ 'x-data-grid': '/x/react-data-grid',
+ 'x-date-pickers': '/x/react-date-pickers',
+ 'x-charts': '/x/react-charts',
+ 'x-tree-view': '/x/react-tree-view',
+ };
+
+ const getVersionOptions = (id, versions) =>
+ versions.map((version) => {
+ if (version === process.env.LIB_VERSION) {
+ return {
+ current: true,
+ text: `v${version}`,
+ href: `${languagePrefix}${productIdSubpathMap[id]}/`,
+ };
+ }
+ return {
+ text: version,
+ href: `https://${version}.mui.com${languagePrefix}${productIdSubpathMap[id]}/`,
+ };
+ });
let productIdentifier = {
metadata: '',
name: 'MUI X',
versions: [
- {
- text: `v${process.env.LIB_VERSION}`,
- current: true,
- },
- { text: 'v6', href: `https://v6.mui.com${languagePrefix}/x/introduction/` },
- { text: 'v5', href: `https://v5.mui.com${languagePrefix}/x/introduction/` },
+ ...getVersionOptions('introduction', ['next', process.env.LIB_VERSION, 'v6', 'v5']),
{ text: 'v4', href: `https://v4.mui.com${languagePrefix}/components/data-grid/` },
],
};
@@ -226,12 +242,7 @@ function AppWrapper(props) {
metadata: 'MUI X',
name: 'Data Grid',
versions: [
- {
- text: `v${process.env.DATA_GRID_VERSION}`,
- current: true,
- },
- { text: 'v6', href: `https://v6.mui.com${languagePrefix}/x/react-data-grid/` },
- { text: 'v5', href: `https://v5.mui.com${languagePrefix}/x/react-data-grid/` },
+ ...getVersionOptions('x-data-grid', ['next', process.env.DATA_GRID_VERSION, 'v6', 'v5']),
{ text: 'v4', href: `https://v4.mui.com${languagePrefix}/components/data-grid/` },
],
};
@@ -240,14 +251,7 @@ function AppWrapper(props) {
metadata: 'MUI X',
name: 'Date Pickers',
versions: [
- {
- text: `v${process.env.DATE_PICKERS_VERSION}`,
- current: true,
- },
- {
- text: 'v6',
- href: `https://v6.mui.com${languagePrefix}/x/react-date-pickers/`,
- },
+ ...getVersionOptions('x-date-pickers', ['next', process.env.DATE_PICKERS_VERSION, 'v6']),
{
text: 'v5',
href: `https://v5.mui.com${languagePrefix}/x/react-date-pickers/getting-started/`,
@@ -258,23 +262,14 @@ function AppWrapper(props) {
productIdentifier = {
metadata: 'MUI X',
name: 'Charts',
- versions: [
- {
- text: `v${process.env.CHARTS_VERSION}`,
- current: true,
- },
- { text: 'v6', href: `https://v6.mui.com${languagePrefix}/x/react-charts/` },
- ],
+ versions: getVersionOptions('x-charts', ['next', process.env.CHARTS_VERSION, 'v6']),
};
} else if (productId === 'x-tree-view') {
productIdentifier = {
metadata: 'MUI X',
name: 'Tree View',
versions: [
- {
- text: `v${process.env.TREE_VIEW_VERSION}`,
- current: true,
- },
+ ...getVersionOptions('x-tree-view', ['next', process.env.TREE_VIEW_VERSION]),
{
text: 'v6',
href: `https://v6.mui.com${languagePrefix}/x/react-tree-view/getting-started`,
diff --git a/docs/pages/x/api/charts/bar-series-type.json b/docs/pages/x/api/charts/bar-series-type.json
index cf2252d4cc89d..29c14e4317f73 100644
--- a/docs/pages/x/api/charts/bar-series-type.json
+++ b/docs/pages/x/api/charts/bar-series-type.json
@@ -17,8 +17,6 @@
"stackOrder": { "type": { "description": "StackOrderType" }, "default": "'none'" },
"valueFormatter": { "type": { "description": "SeriesValueFormatter<TValue>" } },
"xAxisId": { "type": { "description": "string" } },
- "xAxisKey": { "type": { "description": "string" } },
- "yAxisId": { "type": { "description": "string" } },
- "yAxisKey": { "type": { "description": "string" } }
+ "yAxisId": { "type": { "description": "string" } }
}
}
diff --git a/docs/pages/x/api/charts/line-series-type.json b/docs/pages/x/api/charts/line-series-type.json
index 147f90302c1d5..7833c73708042 100644
--- a/docs/pages/x/api/charts/line-series-type.json
+++ b/docs/pages/x/api/charts/line-series-type.json
@@ -22,8 +22,6 @@
"stackOrder": { "type": { "description": "StackOrderType" }, "default": "'none'" },
"valueFormatter": { "type": { "description": "SeriesValueFormatter<TValue>" } },
"xAxisId": { "type": { "description": "string" } },
- "xAxisKey": { "type": { "description": "string" } },
- "yAxisId": { "type": { "description": "string" } },
- "yAxisKey": { "type": { "description": "string" } }
+ "yAxisId": { "type": { "description": "string" } }
}
}
diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json
index 1e8d0d773d8a7..33ae8035bbe3f 100644
--- a/docs/pages/x/api/charts/pie-chart.json
+++ b/docs/pages/x/api/charts/pie-chart.json
@@ -4,21 +4,6 @@
"type": { "name": "arrayOf", "description": "Array<object>" },
"required": true
},
- "axisHighlight": {
- "type": {
- "name": "shape",
- "description": "{ x?: 'band'
| 'line'
| 'none', y?: 'band'
| 'line'
| 'none' }" - }, - "default": "{ x: 'none', y: 'none' }", - "seeMoreLink": { - "url": "https://mui.com/x/react-charts/highlighting", - "text": "highlighting docs" - } - }, - "bottomAxis": { - "type": { "name": "union", "description": "object
| string" }, - "default": "null" - }, "colors": { "type": { "name": "union", "description": "Array<string>
| func" }, "default": "blueberryTwilightPalette" @@ -32,19 +17,6 @@ "description": "{ dataIndex?: number, seriesId?: number
| string }" } }, - "leftAxis": { - "type": { "name": "union", "description": "object
| string" }, - "default": "null" - }, - "legend": { - "type": { - "name": "shape", - "description": "{ classes?: object, direction?: 'column'
| 'row', hidden?: bool, itemGap?: number, itemMarkHeight?: number, itemMarkWidth?: number, labelStyle?: object, markGap?: number, onItemClick?: func, padding?: number
| { bottom?: number, left?: number, right?: number, top?: number }, position?: { horizontal: 'left'
| 'middle'
| 'right', vertical: 'bottom'
| 'middle'
| 'top' }, slotProps?: object, slots?: object }" - }, - "default": "{ direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }", - "deprecated": true, - "deprecationInfo": "Consider using
| string" }, - "default": "null" - }, "skipAnimation": { "type": { "name": "bool" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { @@ -81,10 +49,6 @@ "default": "{ trigger: 'item' }", "seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" } }, - "topAxis": { - "type": { "name": "union", "description": "object
| string" }, - "default": "null" - }, "width": { "type": { "name": "number" } }, "xAxis": { "type": { @@ -112,30 +76,6 @@ "default": "DefaultChartsAxisTooltipContent", "class": null }, - { - "name": "axisLabel", - "description": "Custom component for axis label.", - "default": "ChartsText", - "class": null - }, - { - "name": "axisLine", - "description": "Custom component for the axis main line.", - "default": "'line'", - "class": null - }, - { - "name": "axisTick", - "description": "Custom component for the axis tick.", - "default": "'line'", - "class": null - }, - { - "name": "axisTickLabel", - "description": "Custom component for tick label.", - "default": "ChartsText", - "class": null - }, { "name": "itemContent", "description": "Custom component for displaying tooltip content when triggered by item event.", diff --git a/docs/pages/x/api/charts/scatter-series-type.json b/docs/pages/x/api/charts/scatter-series-type.json index 9d560abcee2dd..5f422acb68962 100644 --- a/docs/pages/x/api/charts/scatter-series-type.json +++ b/docs/pages/x/api/charts/scatter-series-type.json @@ -19,10 +19,7 @@ "markerSize": { "type": { "description": "number" } }, "valueFormatter": { "type": { "description": "SeriesValueFormatter<TValue>" } }, "xAxisId": { "type": { "description": "string" } }, - "xAxisKey": { "type": { "description": "string" } }, "yAxisId": { "type": { "description": "string" } }, - "yAxisKey": { "type": { "description": "string" } }, - "zAxisId": { "type": { "description": "string" } }, - "zAxisKey": { "type": { "description": "string" } } + "zAxisId": { "type": { "description": "string" } } } } 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 1667cca1371e9..ded5c1bd3c907 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -588,7 +588,11 @@ "rowGroupingModel": { "type": { "name": "arrayOf", "description": "Array<string>" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, - "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, + "rowPositionsDebounceMs": { + "type": { "name": "number" }, + "default": "166", + "deprecated": true + }, "rowReordering": { "type": { "name": "bool" }, "default": "false" }, "rows": { "type": { "name": "arrayOf", "description": "Array<object>" }, @@ -645,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", @@ -785,12 +796,36 @@ "default": "GridRow", "class": "MuiDataGridPremium-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, + { + "name": "baseMenuList", + "description": "The custom MenuList component used in the grid.", + "default": "MenuList", + "class": null + }, + { + "name": "baseMenuItem", + "description": "The custom MenuItem component used in the grid.", + "default": "MenuItem", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", 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 cc714abf8fba2..42df3c1393111 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -523,7 +523,11 @@ "rowCount": { "type": { "name": "number" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, - "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, + "rowPositionsDebounceMs": { + "type": { "name": "number" }, + "default": "166", + "deprecated": true + }, "rowReordering": { "type": { "name": "bool" }, "default": "false" }, "rows": { "type": { "name": "arrayOf", "description": "Array<object>" }, @@ -576,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", @@ -717,12 +728,36 @@ "default": "GridRow", "class": "MuiDataGridPro-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, + { + "name": "baseMenuList", + "description": "The custom MenuList component used in the grid.", + "default": "MenuList", + "class": null + }, + { + "name": "baseMenuItem", + "description": "The custom MenuItem component used in the grid.", + "default": "MenuItem", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 3fd158be8aa04..9994e0dc63178 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -439,7 +439,11 @@ "rowCount": { "type": { "name": "number" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, - "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, + "rowPositionsDebounceMs": { + "type": { "name": "number" }, + "default": "166", + "deprecated": true + }, "rows": { "type": { "name": "arrayOf", "description": "Array<object>" }, "default": "[]" @@ -611,12 +615,36 @@ "default": "GridRow", "class": "MuiDataGrid-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, + { + "name": "baseMenuList", + "description": "The custom MenuList component used in the grid.", + "default": "MenuList", + "class": null + }, + { + "name": "baseMenuItem", + "description": "The custom MenuItem component used in the grid.", + "default": "MenuItem", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", diff --git a/docs/pages/x/api/data-grid/grid-print-export-options.json b/docs/pages/x/api/data-grid/grid-print-export-options.json index 6d19c1df3ffc0..09e234b76a5a0 100644 --- a/docs/pages/x/api/data-grid/grid-print-export-options.json +++ b/docs/pages/x/api/data-grid/grid-print-export-options.json @@ -18,6 +18,6 @@ "hideFooter": { "type": { "description": "boolean" }, "default": "false" }, "hideToolbar": { "type": { "description": "boolean" }, "default": "false" }, "includeCheckboxes": { "type": { "description": "boolean" }, "default": "false" }, - "pageStyle": { "type": { "description": "string | Function" } } + "pageStyle": { "type": { "description": "string | (() => string)" } } } } 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 7cd100636eb8f..79efa85605209 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 @@ -134,6 +134,10 @@ } }, "selectedItems": { "type": { "name": "any" } }, + "selectionPropagation": { + "type": { "name": "shape", "description": "{ descendants?: bool, parents?: bool }" }, + "default": "{ parents: false, descendants: false }" + }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, @@ -178,7 +182,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 53335f98fc5e9..83ada41f5bc56 100644 --- a/docs/pages/x/api/tree-view/rich-tree-view.json +++ b/docs/pages/x/api/tree-view/rich-tree-view.json @@ -109,6 +109,10 @@ } }, "selectedItems": { "type": { "name": "any" } }, + "selectionPropagation": { + "type": { "name": "shape", "description": "{ descendants?: bool, parents?: bool }" }, + "default": "{ parents: false, descendants: false }" + }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, @@ -153,7 +157,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 } ], @@ -164,6 +168,6 @@ "forwardsRefTo": "HTMLUListElement", "filename": "/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx", "inheritance": null, - "demos": "
| object
| bool>
| func
| object" - }, - "additionalInfo": { "sx": true } } }, "name": "TreeItem", @@ -39,46 +23,70 @@ "import { TreeItem } from '@mui/x-tree-view-pro';" ], "slots": [ - { "name": "collapseIcon", "description": "The icon used to collapse the item.", "class": null }, - { "name": "expandIcon", "description": "The icon used to expand the item.", "class": null }, - { "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.", - "class": null + "name": "root", + "description": "The component that renders the root.", + "default": "TreeItemRoot", + "class": "MuiTreeItem-root" + }, + { + "name": "content", + "description": "The component that renders the content of the item.\n(e.g.: everything related to this item, not to its children).", + "default": "TreeItemContent", + "class": "MuiTreeItem-content" }, { "name": "groupTransition", - "description": "The component that animates the appearance / disappearance of the item's children.", - "default": "TreeItem2Group", + "description": "The component that renders the children of the item.", + "default": "TreeItemGroupTransition", "class": "MuiTreeItem-groupTransition" - } - ], - "classes": [ + }, { - "key": "checkbox", - "className": "MuiTreeItem-checkbox", - "description": "Styles applied to the checkbox element.", - "isGlobal": false + "name": "iconContainer", + "description": "The component that renders the icon.", + "default": "TreeItemIconContainer", + "class": "MuiTreeItem-iconContainer" }, { - "key": "content", - "className": "MuiTreeItem-content", - "description": "Styles applied to the content element.", - "isGlobal": false + "name": "checkbox", + "description": "The component that renders the item checkbox for selection.", + "default": "TreeItemCheckbox", + "class": "MuiTreeItem-checkbox" }, + { + "name": "label", + "description": "The component that renders the item label.", + "default": "TreeItemLabel", + "class": "MuiTreeItem-label" + }, + { + "name": "labelInput", + "description": "The component that renders the input to edit the label when the item is editable and is currently being edited.", + "default": "TreeItemLabelInput", + "class": "MuiTreeItem-labelInput" + }, + { + "name": "dragAndDropOverlay", + "description": "The component that renders the overlay when an item reordering is ongoing.\nWarning: This slot is only useful when using the `
{content.map(({ icon, title, link }) => (
-
+
))}
diff --git a/docs/src/modules/components/ChartsInstallationInstructions.js b/docs/src/modules/components/ChartsInstallationInstructions.js
index b11fd2a211354..eeb2d1af86270 100644
--- a/docs/src/modules/components/ChartsInstallationInstructions.js
+++ b/docs/src/modules/components/ChartsInstallationInstructions.js
@@ -4,8 +4,8 @@ import InstallationInstructions from './InstallationInstructions';
// #default-branch-switch
const packages = {
- Community: '@mui/x-charts',
- Pro: '@mui/x-charts-pro',
+ Community: '@mui/x-charts@next',
+ Pro: '@mui/x-charts-pro@next',
};
export default function DataGridInstallationInstructions() {
diff --git a/docs/src/modules/components/DataGridInstallationInstructions.js b/docs/src/modules/components/DataGridInstallationInstructions.js
index fd41a7bddc3e2..030004edd155f 100644
--- a/docs/src/modules/components/DataGridInstallationInstructions.js
+++ b/docs/src/modules/components/DataGridInstallationInstructions.js
@@ -4,9 +4,9 @@ import InstallationInstructions from './InstallationInstructions';
// #default-branch-switch
const packages = {
- Community: '@mui/x-data-grid',
- Pro: '@mui/x-data-grid-pro',
- Premium: '@mui/x-data-grid-premium',
+ Community: '@mui/x-data-grid@next',
+ Pro: '@mui/x-data-grid-pro@next',
+ Premium: '@mui/x-data-grid-premium@next',
};
export default function DataGridInstallationInstructions() {
diff --git a/docs/src/modules/components/PickersInstallationInstructions.js b/docs/src/modules/components/PickersInstallationInstructions.js
index 1282d02797a64..bac6c64d7c20f 100644
--- a/docs/src/modules/components/PickersInstallationInstructions.js
+++ b/docs/src/modules/components/PickersInstallationInstructions.js
@@ -4,8 +4,8 @@ import InstallationInstructions from './InstallationInstructions';
// #default-branch-switch
const packages = {
- Community: '@mui/x-date-pickers',
- Pro: '@mui/x-date-pickers-pro',
+ Community: '@mui/x-date-pickers@next',
+ Pro: '@mui/x-date-pickers-pro@next',
};
const peerDependency = {
diff --git a/docs/src/modules/components/TreeItem2Anatomy.js b/docs/src/modules/components/TreeItem2Anatomy.js
deleted file mode 100644
index 2f46bb4dce947..0000000000000
--- a/docs/src/modules/components/TreeItem2Anatomy.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import Card from '@mui/material/Card';
-import CardMedia from '@mui/material/CardMedia';
-
-export default function TreeItem2Anatomy() {
- const { palette } = useTheme();
-
- const src =
- palette.mode === 'light'
- ? '/static/x/tree-view-illustrations/tree-item-light.png'
- : '/static/x/tree-view-illustrations/tree-item-dark.png';
- return (
-
-
- );
-}
diff --git a/docs/src/modules/components/TreeViewInstallationInstructions.js b/docs/src/modules/components/TreeViewInstallationInstructions.js
index d05d2ebba846e..fdec6c8995099 100644
--- a/docs/src/modules/components/TreeViewInstallationInstructions.js
+++ b/docs/src/modules/components/TreeViewInstallationInstructions.js
@@ -4,8 +4,8 @@ import InstallationInstructions from './InstallationInstructions';
// #default-branch-switch
const packages = {
- Community: '@mui/x-tree-view',
- Pro: '@mui/x-tree-view-pro',
+ Community: '@mui/x-tree-view@next',
+ Pro: '@mui/x-tree-view-pro@next',
};
export default function TreeViewInstallationInstructions() {
diff --git a/docs/src/modules/components/overview/Keyboard.tsx b/docs/src/modules/components/overview/Keyboard.tsx
index 2d0a141601f0f..1f4beb6a67467 100644
--- a/docs/src/modules/components/overview/Keyboard.tsx
+++ b/docs/src/modules/components/overview/Keyboard.tsx
@@ -487,7 +487,6 @@ export default function Keyboard() {
onKeyUp={() => {
setSelectedKey(null);
}}
- enableAccessibleFieldDOMStructure
onSelectedSectionsChange={(newSelectedSection) => {
selectedSection.current = newSelectedSection;
}}
diff --git a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx
index 0dc82b364e0f4..27b6857feed54 100644
--- a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx
+++ b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx
@@ -12,8 +12,8 @@ import {
} from '@mui/x-date-pickers/models';
interface ButtonFieldProps
- extends UseDateFieldProps,
- BaseSingleInputFieldProps {
+ extends UseDateFieldProps,
+ BaseSingleInputFieldProps {
setOpen?: React.Dispatch>;
}
diff --git a/docs/translations/api-docs/charts/bar-series-type.json b/docs/translations/api-docs/charts/bar-series-type.json
index 179d3e15bd8ee..ebb278d10e61c 100644
--- a/docs/translations/api-docs/charts/bar-series-type.json
+++ b/docs/translations/api-docs/charts/bar-series-type.json
@@ -22,8 +22,6 @@
"description": "Formatter used to render values in tooltip or other data display."
},
"xAxisId": { "description": "The id of the x-axis used to render the series." },
- "xAxisKey": { "description": "The id of the x-axis used to render the series." },
- "yAxisId": { "description": "The id of the y-axis used to render the series." },
- "yAxisKey": { "description": "The id of the y-axis used to render the series." }
+ "yAxisId": { "description": "The id of the y-axis used to render the series." }
}
}
diff --git a/docs/translations/api-docs/charts/line-series-type.json b/docs/translations/api-docs/charts/line-series-type.json
index c7c871a6b8e8c..62a540a7437ad 100644
--- a/docs/translations/api-docs/charts/line-series-type.json
+++ b/docs/translations/api-docs/charts/line-series-type.json
@@ -37,8 +37,6 @@
"description": "Formatter used to render values in tooltip or other data display."
},
"xAxisId": { "description": "The id of the x-axis used to render the series." },
- "xAxisKey": { "description": "The id of the x-axis used to render the series." },
- "yAxisId": { "description": "The id of the y-axis used to render the series." },
- "yAxisKey": { "description": "The id of the y-axis used to render the series." }
+ "yAxisId": { "description": "The id of the y-axis used to render the series." }
}
}
diff --git a/docs/translations/api-docs/charts/pie-chart/pie-chart.json b/docs/translations/api-docs/charts/pie-chart/pie-chart.json
index 86d14a746ffb3..fe7624f98324b 100644
--- a/docs/translations/api-docs/charts/pie-chart/pie-chart.json
+++ b/docs/translations/api-docs/charts/pie-chart/pie-chart.json
@@ -1,13 +1,6 @@
{
"componentDescription": "",
"propDescriptions": {
- "axisHighlight": {
- "description": "The configuration of axes highlight.",
- "seeMoreText": "See {{link}} for more details."
- },
- "bottomAxis": {
- "description": "Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." }, - "rightAxis": { - "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object
- Selecting a parent selects all its descendants automatically. - Deselecting a parent deselects all its descendants automatically.
When
- Selecting all the descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically.
Only works when
- Selecting a parent selects all its descendants automatically. - Deselecting a parent deselects all its descendants automatically.
When
- Selecting all the descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically.
Only works when
- Selecting a parent selects all its descendants automatically. - Deselecting a parent deselects all its descendants automatically.
When
- Selecting all the descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically.
Only works when
- Selecting a parent selects all its descendants automatically. - Deselecting a parent deselects all its descendants automatically.
When
- Selecting all the descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically.
Only works when} 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 {}
/**
@@ -159,35 +199,6 @@ BarChartPro.propTypes = {
* @default yAxisIds[0] The id of the first provided axis
*/
leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
- /**
- * @deprecated Consider using `slotProps.legend` instead.
- */
- legend: PropTypes.shape({
- classes: PropTypes.object,
- direction: PropTypes.oneOf(['column', 'row']),
- hidden: PropTypes.bool,
- itemGap: PropTypes.number,
- itemMarkHeight: PropTypes.number,
- itemMarkWidth: PropTypes.number,
- labelStyle: PropTypes.object,
- markGap: PropTypes.number,
- onItemClick: PropTypes.func,
- padding: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.shape({
- bottom: PropTypes.number,
- left: PropTypes.number,
- right: PropTypes.number,
- top: PropTypes.number,
- }),
- ]),
- position: PropTypes.shape({
- horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
- vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired,
- }),
- slotProps: PropTypes.object,
- slots: PropTypes.object,
- }),
/**
* If `true`, a loading overlay is displayed.
* @default false
diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx
index f310b073bed57..202b40914d81a 100644
--- a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx
+++ b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { useThemeProps } from '@mui/material/styles';
import useId from '@mui/utils/useId';
+import { MakeOptional } from '@mui/x-internals/types';
import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
import { ChartsAxis, ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
import {
@@ -12,7 +13,6 @@ import {
ChartsTooltipSlots,
} from '@mui/x-charts/ChartsTooltip';
import {
- MakeOptional,
ChartsAxisSlots,
ChartsAxisSlotProps,
ChartsXAxisProps,
diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
index 732756fe17315..b7bbf72236ceb 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 } 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 } 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 } 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 {}
/**
@@ -174,35 +264,6 @@ LineChartPro.propTypes = {
* @default yAxisIds[0] The id of the first provided axis
*/
leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
- /**
- * @deprecated Consider using `slotProps.legend` instead.
- */
- legend: PropTypes.shape({
- classes: PropTypes.object,
- direction: PropTypes.oneOf(['column', 'row']),
- hidden: PropTypes.bool,
- itemGap: PropTypes.number,
- itemMarkHeight: PropTypes.number,
- itemMarkWidth: PropTypes.number,
- labelStyle: PropTypes.object,
- markGap: PropTypes.number,
- onItemClick: PropTypes.func,
- padding: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.shape({
- bottom: PropTypes.number,
- left: PropTypes.number,
- right: PropTypes.number,
- top: PropTypes.number,
- }),
- ]),
- position: PropTypes.shape({
- horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
- vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired,
- }),
- slotProps: PropTypes.object,
- slots: PropTypes.object,
- }),
/**
* If `true`, a loading overlay is displayed.
* @default false
diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx
index 74401ac085dc0..b415635daf082 100644
--- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx
+++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx
@@ -141,35 +141,6 @@ ScatterChartPro.propTypes = {
* @default yAxisIds[0] The id of the first provided axis
*/
leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
- /**
- * @deprecated Consider using `slotProps.legend` instead.
- */
- legend: PropTypes.shape({
- classes: PropTypes.object,
- direction: PropTypes.oneOf(['column', 'row']),
- hidden: PropTypes.bool,
- itemGap: PropTypes.number,
- itemMarkHeight: PropTypes.number,
- itemMarkWidth: PropTypes.number,
- labelStyle: PropTypes.object,
- markGap: PropTypes.number,
- onItemClick: PropTypes.func,
- padding: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.shape({
- bottom: PropTypes.number,
- left: PropTypes.number,
- right: PropTypes.number,
- top: PropTypes.number,
- }),
- ]),
- position: PropTypes.shape({
- horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
- vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired,
- }),
- slotProps: PropTypes.object,
- slots: PropTypes.object,
- }),
/**
* If `true`, a loading overlay is displayed.
* @default false
diff --git a/packages/x-charts-pro/src/models/seriesType/heatmap.ts b/packages/x-charts-pro/src/models/seriesType/heatmap.ts
index 9444f4af60a20..2db79f66bd740 100644
--- a/packages/x-charts-pro/src/models/seriesType/heatmap.ts
+++ b/packages/x-charts-pro/src/models/seriesType/heatmap.ts
@@ -1,5 +1,5 @@
+import { DefaultizedProps } from '@mui/x-internals/types';
import {
- DefaultizedProps,
CommonDefaultizedProps,
CommonSeriesType,
CartesianSeriesType,
diff --git a/packages/x-charts-pro/src/typeOverloads/modules.ts b/packages/x-charts-pro/src/typeOverloads/modules.ts
index 8cdc24c0f4091..734e3e911b7e7 100644
--- a/packages/x-charts-pro/src/typeOverloads/modules.ts
+++ b/packages/x-charts-pro/src/typeOverloads/modules.ts
@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '@mui/x-charts/internals';
+import { DefaultizedProps } from '@mui/x-internals/types';
import {
HeatmapItemIdentifier,
HeatmapSeriesType,
diff --git a/packages/x-charts-vendor/package.json b/packages/x-charts-vendor/package.json
index 79dd902e3dd11..7b2db9acb00d3 100644
--- a/packages/x-charts-vendor/package.json
+++ b/packages/x-charts-vendor/package.json
@@ -24,7 +24,7 @@
}
},
"dependencies": {
- "@babel/runtime": "^7.25.7",
+ "@babel/runtime": "^7.26.0",
"@types/d3-color": "^3.1.3",
"@types/d3-delaunay": "^6.0.4",
"@types/d3-interpolate": "^3.0.4",
@@ -41,7 +41,7 @@
"robust-predicates": "^3.0.2"
},
"devDependencies": {
- "@babel/plugin-transform-runtime": "^7.25.7",
+ "@babel/plugin-transform-runtime": "^7.25.9",
"@types/d3-array": "^3.2.1",
"@types/d3-format": "^3.0.4",
"@types/d3-path": "^3.1.0",
@@ -50,7 +50,7 @@
"d3-format": "^3.1.0",
"d3-path": "^3.1.0",
"d3-time-format": "^4.1.0",
- "execa": "^9.4.0",
+ "execa": "^9.4.1",
"internmap": "^2.0.3",
"rimraf": "^6.0.1"
},
diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json
index 65038b813fb06..e860ba6bf1835 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",
@@ -39,7 +39,7 @@
"directory": "packages/x-charts"
},
"dependencies": {
- "@babel/runtime": "^7.25.7",
+ "@babel/runtime": "^7.26.0",
"@mui/utils": "^5.16.6 || ^6.0.0",
"@mui/x-charts-vendor": "workspace:*",
"@mui/x-internals": "workspace:*",
@@ -65,7 +65,7 @@
}
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.15",
+ "@mui/internal-test-utils": "^1.0.19",
"@mui/material": "^5.16.7",
"@mui/system": "^5.16.7",
"@react-spring/core": "^9.7.5",
diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx
index ca3e113ac3027..58dea244f59a4 100644
--- a/packages/x-charts/src/BarChart/BarChart.tsx
+++ b/packages/x-charts/src/BarChart/BarChart.tsx
@@ -2,6 +2,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { useThemeProps } from '@mui/material/styles';
+import { MakeOptional } from '@mui/x-internals/types';
import { BarPlot, BarPlotProps, BarPlotSlotProps, BarPlotSlots } from './BarPlot';
import {
ResponsiveChartContainer,
@@ -9,19 +10,13 @@ import {
} from '../ResponsiveChartContainer';
import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis';
import { BarSeriesType } from '../models/seriesType/bar';
-import { MakeOptional } from '../models/helpers';
import {
ChartsTooltip,
ChartsTooltipProps,
ChartsTooltipSlotProps,
ChartsTooltipSlots,
} from '../ChartsTooltip';
-import {
- ChartsLegend,
- ChartsLegendProps,
- ChartsLegendSlots,
- ChartsLegendSlotProps,
-} from '../ChartsLegend';
+import { ChartsLegend, ChartsLegendSlots, ChartsLegendSlotProps } from '../ChartsLegend';
import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
import { ChartsClipPath } from '../ChartsClipPath';
import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
@@ -79,10 +74,6 @@ export interface BarChartProps
*
*/
axisHighlight?: ChartsAxisHighlightProps;
- /**
- * @deprecated Consider using `slotProps.legend` instead.
- */
- legend?: ChartsLegendProps;
/**
* Overridable component slots.
* @default {}
@@ -226,35 +217,6 @@ BarChart.propTypes = {
* @default yAxisIds[0] The id of the first provided axis
*/
leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
- /**
- * @deprecated Consider using `slotProps.legend` instead.
- */
- legend: PropTypes.shape({
- classes: PropTypes.object,
- direction: PropTypes.oneOf(['column', 'row']),
- hidden: PropTypes.bool,
- itemGap: PropTypes.number,
- itemMarkHeight: PropTypes.number,
- itemMarkWidth: PropTypes.number,
- labelStyle: PropTypes.object,
- markGap: PropTypes.number,
- onItemClick: PropTypes.func,
- padding: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.shape({
- bottom: PropTypes.number,
- left: PropTypes.number,
- right: PropTypes.number,
- top: PropTypes.number,
- }),
- ]),
- position: PropTypes.shape({
- horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
- vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired,
- }),
- slotProps: PropTypes.object,
- slots: PropTypes.object,
- }),
/**
* If `true`, a loading overlay is displayed.
* @default false
diff --git a/packages/x-charts/src/BarChart/BarElement.tsx b/packages/x-charts/src/BarChart/BarElement.tsx
index f33865e1747f4..ce5f91fcfd2f1 100644
--- a/packages/x-charts/src/BarChart/BarElement.tsx
+++ b/packages/x-charts/src/BarChart/BarElement.tsx
@@ -8,7 +8,7 @@ import { styled } from '@mui/material/styles';
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
import { AnimatedProps, animated } from '@react-spring/web';
-import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
import { SeriesId } from '../models/seriesType/common';
import { useItemHighlighted } from '../context';
diff --git a/packages/x-charts/src/BarChart/BarLabel/BarLabelItem.tsx b/packages/x-charts/src/BarChart/BarLabel/BarLabelItem.tsx
index a71c3c7a4a296..33a993fd7694f 100644
--- a/packages/x-charts/src/BarChart/BarLabel/BarLabelItem.tsx
+++ b/packages/x-charts/src/BarChart/BarLabel/BarLabelItem.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import useSlotProps from '@mui/utils/useSlotProps';
import PropTypes from 'prop-types';
-import { SlotComponentPropsFromProps } from '../../internals/SlotComponentPropsFromProps';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
import { useUtilityClasses } from './barLabelClasses';
import { BarLabelOwnerState, BarItem, BarLabelContext } from './BarLabel.types';
import { getBarLabel } from './getBarLabel';
diff --git a/packages/x-charts/src/BarChart/BarPlot.tsx b/packages/x-charts/src/BarChart/BarPlot.tsx
index c84f74c7711f4..e81f631d0c30a 100644
--- a/packages/x-charts/src/BarChart/BarPlot.tsx
+++ b/packages/x-charts/src/BarChart/BarPlot.tsx
@@ -103,8 +103,8 @@ const useAggregatedData = (): {
const data = stackingGroups.flatMap(({ ids: groupIds }, groupIndex) => {
return groupIds.flatMap((seriesId) => {
- const xAxisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey ?? defaultXAxisId;
- const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey ?? defaultYAxisId;
+ const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
+ const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
const xAxisConfig = xAxis[xAxisId];
const yAxisConfig = yAxis[yAxisId];
diff --git a/packages/x-charts/src/BarChart/extremums.ts b/packages/x-charts/src/BarChart/extremums.ts
index 1ec2cc001b9fd..7d29d237c8679 100644
--- a/packages/x-charts/src/BarChart/extremums.ts
+++ b/packages/x-charts/src/BarChart/extremums.ts
@@ -28,7 +28,7 @@ const getValueExtremum =
return Object.keys(series)
.filter((seriesId) => {
- const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+ const yAxisId = series[seriesId].yAxisId;
return yAxisId === axis.id || (isDefaultAxis && yAxisId === undefined);
})
.reduce(
@@ -38,8 +38,8 @@ const getValueExtremum =
const filter = getFilters?.({
currentAxisId: axis.id,
isDefaultAxis,
- seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
- seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey,
+ seriesXAxisId: series[seriesId].xAxisId,
+ seriesYAxisId: series[seriesId].yAxisId,
});
const [seriesMin, seriesMax] = stackedData?.reduce(
diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts
index d2c5639f79732..64175e646d303 100644
--- a/packages/x-charts/src/BarChart/formatter.ts
+++ b/packages/x-charts/src/BarChart/formatter.ts
@@ -1,9 +1,9 @@
import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
import { warnOnce } from '@mui/x-internals/warning';
+import { DefaultizedProps } from '@mui/x-internals/types';
import { getStackingGroups } from '../internals/stackSeries';
import { ChartSeries, DatasetElementType, DatasetType } from '../models/seriesType/config';
import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
-import { DefaultizedProps } from '../models/helpers';
import { SeriesId } from '../models/seriesType/common';
import { SeriesFormatter } from '../context/PluginProvider/SeriesFormatter.types';
diff --git a/packages/x-charts/src/BarChart/useBarChartProps.ts b/packages/x-charts/src/BarChart/useBarChartProps.ts
index 16d17fc3ffe59..d6495a9c6148b 100644
--- a/packages/x-charts/src/BarChart/useBarChartProps.ts
+++ b/packages/x-charts/src/BarChart/useBarChartProps.ts
@@ -34,7 +34,6 @@ export const useBarChartProps = (props: BarChartProps) => {
tooltip,
onAxisClick,
axisHighlight,
- legend,
grid,
topAxis,
leftAxis,
@@ -146,7 +145,6 @@ export const useBarChartProps = (props: BarChartProps) => {
};
const legendProps: ChartsLegendProps = {
- ...legend,
slots,
slotProps,
};
diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
index 7343ceb1a2fdf..661df7f5987a6 100644
--- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx
+++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
@@ -1,6 +1,7 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
+import { MakeOptional } from '@mui/x-internals/types';
import { DrawingProvider, DrawingProviderProps } from '../context/DrawingProvider';
import { SeriesProvider, SeriesProviderProps } from '../context/SeriesProvider';
import { InteractionProvider } from '../context/InteractionProvider';
@@ -16,7 +17,6 @@ import {
import { PluginProvider, PluginProviderProps } from '../context/PluginProvider';
import { useChartContainerProps } from './useChartContainerProps';
import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
-import { MakeOptional } from '../models/helpers';
import { AnimationProvider, AnimationProviderProps } from '../context/AnimationProvider';
export type ChartContainerProps = Omit<
diff --git a/packages/x-charts/src/ChartContainer/useDefaultizeAxis.ts b/packages/x-charts/src/ChartContainer/useDefaultizeAxis.ts
index a260517f0ba05..99d08ec6c099a 100644
--- a/packages/x-charts/src/ChartContainer/useDefaultizeAxis.ts
+++ b/packages/x-charts/src/ChartContainer/useDefaultizeAxis.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-import { MakeOptional } from '../models/helpers';
import { AxisConfig, ScaleName } from '../models';
import { ChartsAxisProps } from '../models/axis';
import { DatasetType } from '../models/seriesType/config';
diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx
index de75c3dfc288a..1a68804b785fe 100644
--- a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx
+++ b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx
@@ -3,12 +3,11 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import useSlotProps from '@mui/utils/useSlotProps';
import composeClasses from '@mui/utils/composeClasses';
+import { DefaultizedProps } from '@mui/x-internals/types';
import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
import { getSeriesToDisplay } from './utils';
import { getLegendUtilityClass } from './chartsLegendClasses';
-import { DefaultizedProps } from '../models/helpers';
import { DefaultChartsLegend, LegendRendererProps } from './DefaultChartsLegend';
-import { useDrawingArea } from '../hooks';
import { useSeries } from '../hooks/useSeries';
import { LegendPlacement } from './legend.types';
@@ -74,7 +73,6 @@ function ChartsLegend(inProps: ChartsLegendProps) {
const theme = useTheme();
const classes = useUtilityClasses({ ...defaultizedProps, theme });
- const drawingArea = useDrawingArea();
const series = useSeries();
const seriesToDisplay = getSeriesToDisplay(series);
@@ -86,7 +84,6 @@ function ChartsLegend(inProps: ChartsLegendProps) {
additionalProps: {
...other,
classes,
- drawingArea,
series,
seriesToDisplay,
},
diff --git a/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx
index 7278a105536fa..ff2c62ade76bc 100644
--- a/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx
+++ b/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { FormattedSeries } from '../context/SeriesProvider';
import { LegendPerItem, LegendPerItemProps } from './LegendPerItem';
-import { DrawingArea } from '../context/DrawingProvider';
import { LegendItemParams, SeriesLegendItemContext } from './chartsLegend.types';
const seriesContextBuilder = (context: LegendItemParams): SeriesLegendItemContext =>
@@ -19,10 +18,6 @@ export interface LegendRendererProps
extends Omit {
series: FormattedSeries;
seriesToDisplay: LegendPerItemProps['itemsToDisplay'];
- /**
- * @deprecated Use the `useDrawingArea` hook instead.
- */
- drawingArea: Omit;
/**
* Callback fired when a legend item is clicked.
* @param {React.MouseEvent} event The click event.
@@ -42,7 +37,7 @@ export interface LegendRendererProps
}
function DefaultChartsLegend(props: LegendRendererProps) {
- const { drawingArea, seriesToDisplay, hidden, onItemClick, ...other } = props;
+ const { seriesToDisplay, hidden, onItemClick, ...other } = props;
if (hidden) {
return null;
@@ -75,17 +70,6 @@ DefaultChartsLegend.propTypes = {
* The default depends on the chart.
*/
direction: PropTypes.oneOf(['column', 'row']).isRequired,
- /**
- * @deprecated Use the `useDrawingArea` hook instead.
- */
- drawingArea: PropTypes.shape({
- bottom: PropTypes.number.isRequired,
- height: PropTypes.number.isRequired,
- left: PropTypes.number.isRequired,
- right: PropTypes.number.isRequired,
- top: PropTypes.number.isRequired,
- width: PropTypes.number.isRequired,
- }).isRequired,
/**
* Set to true to hide the legend.
* @default false
diff --git a/packages/x-charts/src/ChartsLegend/LegendPerItem.tsx b/packages/x-charts/src/ChartsLegend/LegendPerItem.tsx
index 60abf0ff950d9..77ac080ec7b70 100644
--- a/packages/x-charts/src/ChartsLegend/LegendPerItem.tsx
+++ b/packages/x-charts/src/ChartsLegend/LegendPerItem.tsx
@@ -1,5 +1,6 @@
'use client';
import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
import NoSsr from '@mui/material/NoSsr';
import { useTheme, styled } from '@mui/material/styles';
import { DrawingArea } from '../context/DrawingProvider';
@@ -12,7 +13,6 @@ import { useDrawingArea } from '../hooks/useDrawingArea';
import { AnchorPosition, Direction, LegendPlacement } from './legend.types';
import { ChartsLegendItem } from './ChartsLegendItem';
import { ChartsLegendClasses } from './chartsLegendClasses';
-import { DefaultizedProps } from '../models/helpers';
export type ChartsLegendRootOwnerState = {
position: AnchorPosition;
diff --git a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
index 326f12ef6f4bf..8c26ff5650e65 100644
--- a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
+++ b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
@@ -6,7 +6,7 @@ import { useSeries } from '../hooks/useSeries';
import { useSvgRef } from '../hooks';
import { useCartesianContext } from '../context/CartesianProvider';
-type AxisData = {
+export type ChartsAxisData = {
dataIndex: number;
axisValue?: number | Date | string;
seriesValues: Record;
@@ -19,7 +19,7 @@ export interface ChartsOnAxisClickHandlerProps {
* @param {MouseEvent} event The mouse event recorded on the `` element.
* @param {null | AxisData} data The data about the clicked axis and items associated with it.
*/
- onAxisClick?: (event: MouseEvent, data: null | AxisData) => void;
+ onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
}
function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) {
@@ -55,8 +55,8 @@ function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) {
series[seriesType]?.seriesOrder.forEach((seriesId) => {
const seriesItem = series[seriesType]!.series[seriesId];
- const providedXAxisId = seriesItem.xAxisId ?? seriesItem.xAxisKey;
- const providedYAxisId = seriesItem.yAxisId ?? seriesItem.yAxisKey;
+ const providedXAxisId = seriesItem.xAxisId;
+ const providedYAxisId = seriesItem.yAxisId;
const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
if (axisKey === undefined || axisKey === USED_AXIS_ID) {
diff --git a/packages/x-charts/src/ChartsOverlay/ChartsOverlay.tsx b/packages/x-charts/src/ChartsOverlay/ChartsOverlay.tsx
index 05287192e40b3..f78c62b03624d 100644
--- a/packages/x-charts/src/ChartsOverlay/ChartsOverlay.tsx
+++ b/packages/x-charts/src/ChartsOverlay/ChartsOverlay.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
import { SxProps, Theme } from '@mui/material/styles';
-import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
import { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
import { useSeries } from '../hooks/useSeries';
import { SeriesId } from '../models/seriesType/common';
diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
index b9daca3379cba..28b6f6f833e0b 100644
--- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
+++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
@@ -77,8 +77,8 @@ function ChartsAxisTooltipContent(props: {
series[seriesType]!.seriesOrder.forEach((seriesId) => {
const item = series[seriesType]!.series[seriesId];
- const providedXAxisId = item.xAxisId ?? item.xAxisKey;
- const providedYAxisId = item.yAxisId ?? item.yAxisKey;
+ const providedXAxisId = item.xAxisId;
+ const providedYAxisId = item.yAxisId;
const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
@@ -87,8 +87,7 @@ function ChartsAxisTooltipContent(props: {
const xAxisId = providedXAxisId ?? xAxisIds[0];
const yAxisId = providedYAxisId ?? yAxisIds[0];
- const zAxisId =
- (seriesToAdd as any).zAxisId ?? (seriesToAdd as any).zAxisKey ?? zAxisIds[0];
+ const zAxisId = (seriesToAdd as any).zAxisId ?? zAxisIds[0];
const getColor =
colorProcessors[seriesType]?.(
diff --git a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx
index 8a941f4d9c68b..30140400a9481 100644
--- a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx
+++ b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx
@@ -54,9 +54,9 @@ function ChartsItemTooltipContent(
const { zAxis, zAxisIds } = React.useContext(ZAxisContext);
const colorProcessors = useColorProcessor();
- const xAxisId = (series as any).xAxisId ?? (series as any).xAxisKey ?? xAxisIds[0];
- const yAxisId = (series as any).yAxisId ?? (series as any).yAxisKey ?? yAxisIds[0];
- const zAxisId = (series as any).zAxisId ?? (series as any).zAxisKey ?? zAxisIds[0];
+ const xAxisId = (series as any).xAxisId ?? xAxisIds[0];
+ const yAxisId = (series as any).yAxisId ?? yAxisIds[0];
+ const zAxisId = (series as any).zAxisId ?? zAxisIds[0];
const getColor =
colorProcessors[series.type]?.(
diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
index 4566eddb96d63..560a83ccc9a44 100644
--- a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
+++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
@@ -2,6 +2,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import composeClasses from '@mui/utils/composeClasses';
+import useLazyRef from '@mui/utils/useLazyRef';
import { styled, useThemeProps, SxProps, Theme } from '@mui/material/styles';
import Popper, { PopperProps as BasePopperProps } from '@mui/material/Popper';
import NoSsr from '@mui/material/NoSsr';
@@ -11,12 +12,8 @@ import {
InteractionContext,
ItemInteractionData,
} from '../context/InteractionProvider';
-import {
- generateVirtualElement,
- useMouseTracker,
- getTooltipHasData,
- TriggerOptions,
-} from './utils';
+import { useSvgRef } from '../hooks/useSvgRef';
+import { getTooltipHasData, TriggerOptions, usePointerType } from './utils';
import { ChartSeriesType } from '../models/seriesType/config';
import { ChartsItemContentProps, ChartsItemTooltipContent } from './ChartsItemTooltipContent';
import { ChartsAxisContentProps, ChartsAxisTooltipContent } from './ChartsAxisTooltipContent';
@@ -133,14 +130,19 @@ function ChartsTooltip(inProps: ChartsTooltipProps
});
const { trigger = 'axis', itemContent, axisContent, slots, slotProps } = props;
- const mousePosition = useMouseTracker();
+ const svgRef = useSvgRef();
+ const pointerType = usePointerType();
+
+ const popperRef: PopperProps['popperRef'] = React.useRef(null);
+
+ const positionRef = useLazyRef(() => ({ x: 0, y: 0 }));
const { item, axis } = React.useContext(InteractionContext);
const displayedData = trigger === 'item' ? item : axis;
const tooltipHasData = getTooltipHasData(trigger, displayedData);
- const popperOpen = mousePosition !== null && tooltipHasData;
+ const popperOpen = pointerType !== null && tooltipHasData;
const classes = useUtilityClasses({ classes: props.classes });
@@ -150,14 +152,26 @@ function ChartsTooltip(inProps: ChartsTooltipProps
externalSlotProps: slotProps?.popper,
additionalProps: {
open: popperOpen,
- placement:
- mousePosition?.pointerType === 'mouse' ? ('right-start' as const) : ('top' as const),
- anchorEl: generateVirtualElement(mousePosition),
+ placement: pointerType?.pointerType === 'mouse' ? ('right-start' as const) : ('top' as const),
+ popperRef,
+ anchorEl: {
+ getBoundingClientRect: () => ({
+ x: positionRef.current.x,
+ y: positionRef.current.y,
+ top: positionRef.current.y,
+ left: positionRef.current.x,
+ right: positionRef.current.x,
+ bottom: positionRef.current.y,
+ width: 0,
+ height: 0,
+ toJSON: () => '',
+ }),
+ },
modifiers: [
{
name: 'offset',
options: {
- offset: [0, mousePosition?.pointerType === 'touch' ? 40 - mousePosition.height : 0],
+ offset: [0, pointerType?.pointerType === 'touch' ? 40 - pointerType.height : 0],
},
},
],
@@ -165,6 +179,27 @@ function ChartsTooltip(inProps: ChartsTooltipProps
ownerState: {},
});
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleMove = (event: PointerEvent) => {
+ // eslint-disable-next-line react-compiler/react-compiler
+ positionRef.current = {
+ x: event.clientX,
+ y: event.clientY,
+ };
+ popperRef.current?.update();
+ };
+ element.addEventListener('pointermove', handleMove);
+
+ return () => {
+ element.removeEventListener('pointermove', handleMove);
+ };
+ }, [svgRef, positionRef]);
+
if (trigger === 'none') {
return null;
}
diff --git a/packages/x-charts/src/ChartsTooltip/contentDisplayed.test.tsx b/packages/x-charts/src/ChartsTooltip/contentDisplayed.test.tsx
index 6b4634241e3d5..bde48ebc9f357 100644
--- a/packages/x-charts/src/ChartsTooltip/contentDisplayed.test.tsx
+++ b/packages/x-charts/src/ChartsTooltip/contentDisplayed.test.tsx
@@ -54,6 +54,7 @@ describe('ChartsTooltip', () => {
);
const svg = document.querySelector('svg')!;
+ fireEvent.pointerEnter(svg); // Trigger the tooltip
firePointerEvent(svg, 'pointermove', {
clientX: 198,
clientY: 60,
@@ -120,6 +121,7 @@ describe('ChartsTooltip', () => {
);
const svg = document.querySelector('svg')!;
+ fireEvent.pointerEnter(svg); // Trigger the tooltip
firePointerEvent(svg, 'pointermove', {
clientX: 150,
clientY: 60,
@@ -191,6 +193,7 @@ describe('ChartsTooltip', () => {
fireEvent.pointerEnter(rectangles[0]);
+ fireEvent.pointerEnter(svg); // Trigger the tooltip
firePointerEvent(svg, 'pointermove', {
clientX: 150,
clientY: 60,
@@ -235,6 +238,7 @@ describe('ChartsTooltip', () => {
fireEvent.pointerEnter(rectangles[0]);
+ fireEvent.pointerEnter(svg); // Trigger the tooltip
firePointerEvent(svg, 'pointermove', {
clientX: 150,
clientY: 60,
diff --git a/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx
index 7b86b0bb0648f..109665b90e5d3 100644
--- a/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx
+++ b/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx
@@ -61,8 +61,8 @@ export function useAxisTooltip(): null | UseAxisTooltipReturnValue {
return seriesOfType.seriesOrder.map((seriesId) => {
const seriesToAdd = seriesOfType.series[seriesId]!;
- const providedXAxisId = seriesToAdd.xAxisId ?? seriesToAdd.xAxisKey;
- const providedYAxisId = seriesToAdd.yAxisId ?? seriesToAdd.yAxisKey;
+ const providedXAxisId = seriesToAdd.xAxisId;
+ const providedYAxisId = seriesToAdd.yAxisId;
const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
@@ -70,8 +70,7 @@ export function useAxisTooltip(): null | UseAxisTooltipReturnValue {
if (axisKey === undefined || axisKey === USED_AXIS_ID) {
const xAxisId = providedXAxisId ?? xAxisIds[0];
const yAxisId = providedYAxisId ?? yAxisIds[0];
- const zAxisId =
- (seriesToAdd as any).zAxisId ?? (seriesToAdd as any).zAxisKey ?? zAxisIds[0];
+ const zAxisId = (seriesToAdd as any).zAxisId ?? zAxisIds[0];
const color =
colorProcessors[seriesType]?.(
diff --git a/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx
index 5743592e31dcf..a3ab97c287b18 100644
--- a/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx
+++ b/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx
@@ -29,9 +29,9 @@ export function useItemTooltip(): null | UseItemToolt
const { zAxis, zAxisIds } = React.useContext(ZAxisContext);
const colorProcessors = useColorProcessor();
- const xAxisId = (series as any).xAxisId ?? (series as any).xAxisKey ?? xAxisIds[0];
- const yAxisId = (series as any).yAxisId ?? (series as any).yAxisKey ?? yAxisIds[0];
- const zAxisId = (series as any).zAxisId ?? (series as any).zAxisKey ?? zAxisIds[0];
+ const xAxisId = (series as any).xAxisId ?? xAxisIds[0];
+ const yAxisId = (series as any).yAxisId ?? yAxisIds[0];
+ const zAxisId = (series as any).zAxisId ?? zAxisIds[0];
if (!item || item.dataIndex === undefined) {
return null;
diff --git a/packages/x-charts/src/ChartsTooltip/utils.tsx b/packages/x-charts/src/ChartsTooltip/utils.tsx
index 89faff2a7b17e..227c7f58e24ea 100644
--- a/packages/x-charts/src/ChartsTooltip/utils.tsx
+++ b/packages/x-charts/src/ChartsTooltip/utils.tsx
@@ -10,43 +10,11 @@ type MousePosition = {
height: number;
};
-export function generateVirtualElement(mousePosition: MousePosition | null) {
- if (mousePosition === null) {
- return {
- getBoundingClientRect: () => ({
- width: 0,
- height: 0,
- x: 0,
- y: 0,
- top: 0,
- right: 0,
- bottom: 0,
- left: 0,
- toJSON: () => '',
- }),
- };
- }
- const { x, y } = mousePosition;
- const boundingBox = {
- width: 0,
- height: 0,
- x,
- y,
- top: y,
- right: x,
- bottom: y,
- left: x,
- };
- return {
- getBoundingClientRect: () => ({
- ...boundingBox,
- toJSON: () => JSON.stringify(boundingBox),
- }),
- };
-}
-
export type UseMouseTrackerReturnValue = null | MousePosition;
+/**
+ * @deprecated We recommend using vanilla JS to let popper track mouse position.
+ */
export function useMouseTracker(): UseMouseTrackerReturnValue {
const svgRef = useSvgRef();
@@ -59,6 +27,8 @@ export function useMouseTracker(): UseMouseTrackerReturnValue {
return () => {};
}
+ const controller = new AbortController();
+
const handleOut = (event: PointerEvent) => {
if (event.pointerType !== 'mouse') {
setMousePosition(null);
@@ -74,18 +44,57 @@ export function useMouseTracker(): UseMouseTrackerReturnValue {
});
};
- element.addEventListener('pointerdown', handleMove);
- element.addEventListener('pointermove', handleMove);
+ element.addEventListener('pointerdown', handleMove, { signal: controller.signal });
+ element.addEventListener('pointermove', handleMove, { signal: controller.signal });
+ element.addEventListener('pointerup', handleOut, { signal: controller.signal });
+
+ return () => {
+ // Calling `.abort()` removes ALL event listeners
+ // For more info, see https://kettanaito.com/blog/dont-sleep-on-abort-controller
+ controller.abort();
+ };
+ }, [svgRef]);
+
+ return mousePosition;
+}
+
+type PointerType = Pick;
+
+export function usePointerType(): null | PointerType {
+ const svgRef = useSvgRef();
+
+ // Use a ref to avoid rerendering on every mousemove event.
+ const [pointerType, setPointerType] = React.useState(null);
+
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleOut = (event: PointerEvent) => {
+ if (event.pointerType !== 'mouse') {
+ setPointerType(null);
+ }
+ };
+
+ const handleEnter = (event: PointerEvent) => {
+ setPointerType({
+ height: event.height,
+ pointerType: event.pointerType as PointerType['pointerType'],
+ });
+ };
+
+ element.addEventListener('pointerenter', handleEnter);
element.addEventListener('pointerup', handleOut);
return () => {
- element.removeEventListener('pointerdown', handleMove);
- element.removeEventListener('pointermove', handleMove);
+ element.removeEventListener('pointerenter', handleEnter);
element.removeEventListener('pointerup', handleOut);
};
}, [svgRef]);
- return mousePosition;
+ return pointerType;
}
export type TriggerOptions = 'item' | 'axis' | 'none';
diff --git a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx
index 4a70336255dea..ad1dea102fc65 100644
--- a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx
+++ b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx
@@ -64,10 +64,10 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
voronoiRef.current = {};
let points: number[] = [];
seriesOrder.forEach((seriesId) => {
- const { data, xAxisId, yAxisId, xAxisKey, yAxisKey } = series[seriesId];
+ const { data, xAxisId, yAxisId } = series[seriesId];
- const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
- const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
+ const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
+ const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
const getXPosition = getValueToPositionMapper(xScale);
const getYPosition = getValueToPositionMapper(yScale);
diff --git a/packages/x-charts/src/LineChart/AreaElement.tsx b/packages/x-charts/src/LineChart/AreaElement.tsx
index 6fe9bfabf0301..fe7a0216bee58 100644
--- a/packages/x-charts/src/LineChart/AreaElement.tsx
+++ b/packages/x-charts/src/LineChart/AreaElement.tsx
@@ -5,7 +5,7 @@ import composeClasses from '@mui/utils/composeClasses';
import useSlotProps from '@mui/utils/useSlotProps';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
import { AnimatedArea, AnimatedAreaProps } from './AnimatedArea';
import { SeriesId } from '../models/seriesType/common';
diff --git a/packages/x-charts/src/LineChart/AreaPlot.tsx b/packages/x-charts/src/LineChart/AreaPlot.tsx
index e46e1e4df24a8..7db6cbaf1c821 100644
--- a/packages/x-charts/src/LineChart/AreaPlot.tsx
+++ b/packages/x-charts/src/LineChart/AreaPlot.tsx
@@ -56,19 +56,14 @@ const useAggregatedData = () => {
.reverse() // Revert stacked area for a more pleasant animation
.map((seriesId) => {
const {
- xAxisId: xAxisIdProp,
- yAxisId: yAxisIdProp,
- xAxisKey = defaultXAxisId,
- yAxisKey = defaultYAxisId,
+ xAxisId = defaultXAxisId,
+ yAxisId = defaultYAxisId,
stackedData,
data,
connectNulls,
baseline,
} = series[seriesId];
- const xAxisId = xAxisIdProp ?? xAxisKey;
- const yAxisId = yAxisIdProp ?? yAxisKey;
-
const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
const yScale = yAxis[yAxisId].scale;
const xData = xAxis[xAxisId].data;
diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx
index 127c029e98672..f18aef0a79694 100644
--- a/packages/x-charts/src/LineChart/LineChart.tsx
+++ b/packages/x-charts/src/LineChart/LineChart.tsx
@@ -2,6 +2,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { useThemeProps } from '@mui/material/styles';
+import { MakeOptional } from '@mui/x-internals/types';
import { AreaPlot, AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from './AreaPlot';
import { LinePlot, LinePlotProps, LinePlotSlotProps, LinePlotSlots } from './LinePlot';
import {
@@ -11,19 +12,13 @@ import {
import { MarkPlot, MarkPlotProps, MarkPlotSlotProps, MarkPlotSlots } from './MarkPlot';
import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
import { LineSeriesType } from '../models/seriesType/line';
-import { MakeOptional } from '../models/helpers';
import {
ChartsTooltip,
ChartsTooltipProps,
ChartsTooltipSlotProps,
ChartsTooltipSlots,
} from '../ChartsTooltip';
-import {
- ChartsLegend,
- ChartsLegendProps,
- ChartsLegendSlotProps,
- ChartsLegendSlots,
-} from '../ChartsLegend';
+import { ChartsLegend, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
import { ChartsClipPath } from '../ChartsClipPath';
import { ChartsAxisSlotProps, ChartsAxisSlots } from '../models/axis';
@@ -90,10 +85,6 @@ export interface LineChartProps
* @default { x: 'line' }
*/
axisHighlight?: ChartsAxisHighlightProps;
- /**
- * @deprecated Consider using `slotProps.legend` instead.
- */
- legend?: ChartsLegendProps;
/**
* If `true`, render the line highlight item.
*/
@@ -255,35 +246,6 @@ LineChart.propTypes = {
* @default yAxisIds[0] The id of the first provided axis
*/
leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
- /**
- * @deprecated Consider using `slotProps.legend` instead.
- */
- legend: PropTypes.shape({
- classes: PropTypes.object,
- direction: PropTypes.oneOf(['column', 'row']),
- hidden: PropTypes.bool,
- itemGap: PropTypes.number,
- itemMarkHeight: PropTypes.number,
- itemMarkWidth: PropTypes.number,
- labelStyle: PropTypes.object,
- markGap: PropTypes.number,
- onItemClick: PropTypes.func,
- padding: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.shape({
- bottom: PropTypes.number,
- left: PropTypes.number,
- right: PropTypes.number,
- top: PropTypes.number,
- }),
- ]),
- position: PropTypes.shape({
- horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
- vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired,
- }),
- slotProps: PropTypes.object,
- slots: PropTypes.object,
- }),
/**
* If `true`, a loading overlay is displayed.
* @default false
diff --git a/packages/x-charts/src/LineChart/LineElement.tsx b/packages/x-charts/src/LineChart/LineElement.tsx
index 269f5a9102262..a251ebf47ebc9 100644
--- a/packages/x-charts/src/LineChart/LineElement.tsx
+++ b/packages/x-charts/src/LineChart/LineElement.tsx
@@ -5,7 +5,7 @@ import composeClasses from '@mui/utils/composeClasses';
import useSlotProps from '@mui/utils/useSlotProps';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
import { AnimatedLine, AnimatedLineProps } from './AnimatedLine';
import { SeriesId } from '../models/seriesType/common';
diff --git a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx
index 5e1f55c1530f2..a5911052eb101 100644
--- a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx
+++ b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
-import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
import { useCartesianContext } from '../context/CartesianProvider';
import { LineHighlightElement, LineHighlightElementProps } from './LineHighlightElement';
import { getValueToPositionMapper } from '../hooks/useScale';
@@ -70,18 +70,13 @@ function LineHighlightPlot(props: LineHighlightPlotProps) {
{stackingGroups.flatMap(({ ids: groupIds }) => {
return groupIds.flatMap((seriesId) => {
const {
- xAxisId: xAxisIdProp,
- yAxisId: yAxisIdProp,
- xAxisKey = defaultXAxisId,
- yAxisKey = defaultYAxisId,
+ xAxisId = defaultXAxisId,
+ yAxisId = defaultYAxisId,
stackedData,
data,
disableHighlight,
} = series[seriesId];
- const xAxisId = xAxisIdProp ?? xAxisKey;
- const yAxisId = yAxisIdProp ?? yAxisKey;
-
if (disableHighlight || data[highlightedIndex] == null) {
return null;
}
diff --git a/packages/x-charts/src/LineChart/LinePlot.tsx b/packages/x-charts/src/LineChart/LinePlot.tsx
index a8451c0a787d4..75ada74aa047b 100644
--- a/packages/x-charts/src/LineChart/LinePlot.tsx
+++ b/packages/x-charts/src/LineChart/LinePlot.tsx
@@ -54,18 +54,13 @@ const useAggregatedData = () => {
return stackingGroups.flatMap(({ ids: groupIds }) => {
return groupIds.flatMap((seriesId) => {
const {
- xAxisId: xAxisIdProp,
- yAxisId: yAxisIdProp,
- xAxisKey = defaultXAxisId,
- yAxisKey = defaultYAxisId,
+ xAxisId = defaultXAxisId,
+ yAxisId = defaultYAxisId,
stackedData,
data,
connectNulls,
} = series[seriesId];
- const xAxisId = xAxisIdProp ?? xAxisKey;
- const yAxisId = yAxisIdProp ?? yAxisKey;
-
const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
const yScale = yAxis[yAxisId].scale;
const xData = xAxis[xAxisId].data;
diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx
index c9e446c2a3ffa..7731eba6392fb 100644
--- a/packages/x-charts/src/LineChart/MarkPlot.tsx
+++ b/packages/x-charts/src/LineChart/MarkPlot.tsx
@@ -93,10 +93,8 @@ function MarkPlot(props: MarkPlotProps) {
{stackingGroups.flatMap(({ ids: groupIds }) => {
return groupIds.map((seriesId) => {
const {
- xAxisId: xAxisIdProp,
- yAxisId: yAxisIdProp,
- xAxisKey = defaultXAxisId,
- yAxisKey = defaultYAxisId,
+ xAxisId = defaultXAxisId,
+ yAxisId = defaultYAxisId,
stackedData,
data,
showMark = true,
@@ -106,9 +104,6 @@ function MarkPlot(props: MarkPlotProps) {
return null;
}
- const xAxisId = xAxisIdProp ?? xAxisKey;
- const yAxisId = yAxisIdProp ?? yAxisKey;
-
const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
const yScale = yAxis[yAxisId].scale;
const xData = xAxis[xAxisId].data;
diff --git a/packages/x-charts/src/LineChart/extremums.ts b/packages/x-charts/src/LineChart/extremums.ts
index e903b5b6e7482..1640dbc7b91d9 100644
--- a/packages/x-charts/src/LineChart/extremums.ts
+++ b/packages/x-charts/src/LineChart/extremums.ts
@@ -36,7 +36,7 @@ export const getExtremumY: ExtremumGetter<'line'> = (params) => {
return Object.keys(series)
.filter((seriesId) => {
- const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+ const yAxisId = series[seriesId].yAxisId;
return yAxisId === axis.id || (isDefaultAxis && yAxisId === undefined);
})
.reduce(
@@ -47,8 +47,8 @@ export const getExtremumY: ExtremumGetter<'line'> = (params) => {
const filter = getFilters?.({
currentAxisId: axis.id,
isDefaultAxis,
- seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
- seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey,
+ seriesXAxisId: series[seriesId].xAxisId,
+ seriesYAxisId: series[seriesId].yAxisId,
});
// Since this series is not used to display an area, we do not consider the base (the d[0]).
diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts
index ec0ec804abb50..9364ed579e3e5 100644
--- a/packages/x-charts/src/LineChart/formatter.ts
+++ b/packages/x-charts/src/LineChart/formatter.ts
@@ -1,9 +1,9 @@
import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
import { warnOnce } from '@mui/x-internals/warning';
+import { DefaultizedProps } from '@mui/x-internals/types';
import { getStackingGroups } from '../internals/stackSeries';
import { ChartSeries, DatasetElementType, DatasetType } from '../models/seriesType/config';
import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
-import { DefaultizedProps } from '../models/helpers';
import { SeriesId } from '../models/seriesType/common';
import { SeriesFormatter } from '../context/PluginProvider/SeriesFormatter.types';
diff --git a/packages/x-charts/src/LineChart/useLineChartProps.ts b/packages/x-charts/src/LineChart/useLineChartProps.ts
index 2b609dc7ff5d1..75ccf3bab7809 100644
--- a/packages/x-charts/src/LineChart/useLineChartProps.ts
+++ b/packages/x-charts/src/LineChart/useLineChartProps.ts
@@ -41,7 +41,6 @@ export const useLineChartProps = (props: LineChartProps) => {
onMarkClick,
axisHighlight,
disableLineItemHighlight,
- legend,
grid,
topAxis,
leftAxis,
@@ -160,7 +159,6 @@ export const useLineChartProps = (props: LineChartProps) => {
};
const legendProps: ChartsLegendProps = {
- ...legend,
slots,
slotProps,
};
diff --git a/packages/x-charts/src/PieChart/PieArc.tsx b/packages/x-charts/src/PieChart/PieArc.tsx
index 6919b17363ed7..99c7eda9f856f 100644
--- a/packages/x-charts/src/PieChart/PieArc.tsx
+++ b/packages/x-charts/src/PieChart/PieArc.tsx
@@ -9,7 +9,6 @@ import { styled } from '@mui/material/styles';
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
import { PieItemId } from '../models';
-import { HighlightScope } from '../context';
export interface PieArcClasses {
/** Styles applied to the root element. */
@@ -64,10 +63,6 @@ export type PieArcProps = Omit, 'ref' | 'id'> &
PieArcOwnerState & {
cornerRadius: SpringValue;
endAngle: SpringValue;
- /**
- * @deprecated Use the `isFaded` or `isHighlighted` props instead.
- */
- highlightScope?: Partial;
innerRadius: SpringValue;
onClick?: (event: React.MouseEvent) => void;
outerRadius: SpringValue;
@@ -90,7 +85,6 @@ function PieArc(props: PieArcProps) {
outerRadius,
paddingAngle,
startAngle,
- highlightScope,
...other
} = props;
@@ -137,15 +131,6 @@ PieArc.propTypes = {
// ----------------------------------------------------------------------
classes: PropTypes.object,
dataIndex: PropTypes.number.isRequired,
- /**
- * @deprecated Use the `isFaded` or `isHighlighted` props instead.
- */
- highlightScope: PropTypes.shape({
- fade: PropTypes.oneOf(['global', 'none', 'series']),
- faded: PropTypes.oneOf(['global', 'none', 'series']),
- highlight: PropTypes.oneOf(['item', 'none', 'series']),
- highlighted: PropTypes.oneOf(['item', 'none', 'series']),
- }),
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
isFaded: PropTypes.bool.isRequired,
isHighlighted: PropTypes.bool.isRequired,
diff --git a/packages/x-charts/src/PieChart/PieArcPlot.tsx b/packages/x-charts/src/PieChart/PieArcPlot.tsx
index 13e233d5b642a..c2c7279a9ef97 100644
--- a/packages/x-charts/src/PieChart/PieArcPlot.tsx
+++ b/packages/x-charts/src/PieChart/PieArcPlot.tsx
@@ -15,7 +15,6 @@ import {
ValueWithHighlight,
useTransformData,
} from './dataTransform/useTransformData';
-import { useHighlighted } from '../context';
export interface PieArcPlotSlots {
pieArc?: React.JSXElementConstructor;
@@ -95,7 +94,6 @@ function PieArcPlot(props: PieArcPlotProps) {
...defaultTransitionConfig,
immediate: skipAnimation,
});
- const { highlightScope } = useHighlighted();
if (data.length === 0) {
return null;
@@ -133,7 +131,6 @@ function PieArcPlot(props: PieArcPlotProps) {
id={id}
color={item.color}
dataIndex={index}
- highlightScope={highlightScope}
isFaded={item.isFaded}
isHighlighted={item.isHighlighted}
onClick={
diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx
index 94b5ae48ac893..b0496fa39bb5f 100644
--- a/packages/x-charts/src/PieChart/PieChart.tsx
+++ b/packages/x-charts/src/PieChart/PieChart.tsx
@@ -3,35 +3,21 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { useRtl } from '@mui/system/RtlProvider';
import { useThemeProps } from '@mui/material/styles';
+import { MakeOptional } from '@mui/x-internals/types';
import {
ResponsiveChartContainer,
ResponsiveChartContainerProps,
} from '../ResponsiveChartContainer';
-import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
import { PieSeriesType } from '../models/seriesType';
-import { MakeOptional } from '../models/helpers';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
import {
ChartsTooltip,
ChartsTooltipProps,
ChartsTooltipSlotProps,
ChartsTooltipSlots,
} from '../ChartsTooltip';
-import {
- ChartsLegend,
- ChartsLegendProps,
- ChartsLegendSlotProps,
- ChartsLegendSlots,
-} from '../ChartsLegend';
-import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { ChartsLegend, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
import { PiePlot, PiePlotProps, PiePlotSlotProps, PiePlotSlots } from './PiePlot';
import { PieValueType } from '../models/seriesType/pie';
-import {
- ChartsAxisSlots,
- ChartsAxisSlotProps,
- ChartsXAxisProps,
- ChartsYAxisProps,
-} from '../models/axis';
import {
ChartsOverlay,
ChartsOverlayProps,
@@ -40,15 +26,13 @@ import {
} from '../ChartsOverlay';
export interface PieChartSlots
- extends ChartsAxisSlots,
- PiePlotSlots,
+ extends PiePlotSlots,
ChartsLegendSlots,
ChartsTooltipSlots<'pie'>,
ChartsOverlaySlots {}
export interface PieChartSlotProps
- extends ChartsAxisSlotProps,
- PiePlotSlotProps,
+ extends PiePlotSlotProps,
ChartsLegendSlotProps,
ChartsTooltipSlotProps<'pie'>,
ChartsOverlaySlotProps {}
@@ -58,21 +42,8 @@ export interface PieChartProps
ResponsiveChartContainerProps,
'series' | 'leftAxis' | 'bottomAxis' | 'plugins' | 'zAxis'
>,
- Omit,
Omit,
Pick {
- /**
- * Indicate which axis to display the bottom of the charts.
- * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
- * @default null
- */
- bottomAxis?: null | string | ChartsXAxisProps;
- /**
- * Indicate which axis to display the left of the charts.
- * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
- * @default null
- */
- leftAxis?: null | string | ChartsYAxisProps;
/**
* The series to display in the pie chart.
* An array of [[PieSeriesType]] objects.
@@ -84,18 +55,6 @@ export interface PieChartProps
* @default { trigger: 'item' }
*/
tooltip?: ChartsTooltipProps<'pie'>;
- /**
- * The configuration of axes highlight.
- * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
- * @default { x: 'none', y: 'none' }
- */
- axisHighlight?: ChartsAxisHighlightProps;
- /**
- * The props of the legend.
- * @default { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }
- * @deprecated Consider using `slotProps.legend` instead.
- */
- legend?: ChartsLegendProps;
/**
* Callback fired when a pie arc is clicked.
*/
@@ -137,13 +96,7 @@ const PieChart = React.forwardRef(function PieChart(inProps: PieChartProps, ref)
colors,
sx,
tooltip = { trigger: 'item' },
- axisHighlight = { x: 'none', y: 'none' },
skipAnimation,
- legend: legendProps,
- topAxis = null,
- leftAxis = null,
- rightAxis = null,
- bottomAxis = null,
children,
slots,
slotProps,
@@ -157,11 +110,6 @@ const PieChart = React.forwardRef(function PieChart(inProps: PieChartProps, ref)
const isRtl = useRtl();
const margin = { ...(isRtl ? defaultRTLMargin : defaultMargin), ...marginProps };
- const legend: ChartsLegendProps = {
- direction: 'column',
- position: { vertical: 'middle', horizontal: isRtl ? 'left' : 'right' },
- ...legendProps,
- };
return (
s.data.length)))].map(
- (_, index) => index,
- ),
- },
- ]
- }
- yAxis={yAxis}
colors={colors}
sx={sx}
- disableAxisListener={
- tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none'
- }
+ disableAxisListener
highlightedItem={highlightedItem}
onHighlightChange={onHighlightChange}
className={className}
skipAnimation={skipAnimation}
>
-
@@ -216,21 +146,6 @@ PieChart.propTypes = {
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
- /**
- * The configuration of axes highlight.
- * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
- * @default { x: 'none', y: 'none' }
- */
- axisHighlight: PropTypes.shape({
- x: PropTypes.oneOf(['band', 'line', 'none']),
- y: PropTypes.oneOf(['band', 'line', 'none']),
- }),
- /**
- * Indicate which axis to display the bottom of the charts.
- * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
- * @default null
- */
- bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
children: PropTypes.node,
className: PropTypes.string,
/**
@@ -260,43 +175,6 @@ PieChart.propTypes = {
dataIndex: PropTypes.number,
seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
}),
- /**
- * Indicate which axis to display the left of the charts.
- * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
- * @default null
- */
- leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
- /**
- * The props of the legend.
- * @default { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }
- * @deprecated Consider using `slotProps.legend` instead.
- */
- legend: PropTypes.shape({
- classes: PropTypes.object,
- direction: PropTypes.oneOf(['column', 'row']),
- hidden: PropTypes.bool,
- itemGap: PropTypes.number,
- itemMarkHeight: PropTypes.number,
- itemMarkWidth: PropTypes.number,
- labelStyle: PropTypes.object,
- markGap: PropTypes.number,
- onItemClick: PropTypes.func,
- padding: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.shape({
- bottom: PropTypes.number,
- left: PropTypes.number,
- right: PropTypes.number,
- top: PropTypes.number,
- }),
- ]),
- position: PropTypes.shape({
- horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
- vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired,
- }),
- slotProps: PropTypes.object,
- slots: PropTypes.object,
- }),
/**
* If `true`, a loading overlay is displayed.
* @default false
@@ -334,12 +212,6 @@ PieChart.propTypes = {
* @default false
*/
resolveSizeBeforeRender: PropTypes.bool,
- /**
- * Indicate which axis to display the right of the charts.
- * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
- * @default null
- */
- rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
/**
* The series to display in the pie chart.
* An array of [[PieSeriesType]] objects.
@@ -379,12 +251,6 @@ PieChart.propTypes = {
slots: PropTypes.object,
trigger: PropTypes.oneOf(['axis', 'item', 'none']),
}),
- /**
- * Indicate which axis to display the top of the charts.
- * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
- * @default null
- */
- topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
viewBox: PropTypes.shape({
height: PropTypes.number,
width: PropTypes.number,
diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
index 88a9465211217..97583d34e035b 100644
--- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx
+++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
@@ -2,6 +2,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { useThemeProps } from '@mui/material/styles';
+import { MakeOptional } from '@mui/x-internals/types';
import {
ScatterPlot,
ScatterPlotProps,
@@ -14,19 +15,13 @@ import {
} from '../ResponsiveChartContainer';
import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis';
import { ScatterSeriesType } from '../models/seriesType/scatter';
-import { MakeOptional } from '../models/helpers';
import {
ChartsTooltip,
ChartsTooltipProps,
ChartsTooltipSlotProps,
ChartsTooltipSlots,
} from '../ChartsTooltip';
-import {
- ChartsLegend,
- ChartsLegendProps,
- ChartsLegendSlotProps,
- ChartsLegendSlots,
-} from '../ChartsLegend';
+import { ChartsLegend, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
import {
ChartsOverlay,
ChartsOverlayProps,
@@ -88,10 +83,6 @@ export interface ScatterChartProps
* @default false
*/
disableVoronoi?: boolean;
- /**
- * @deprecated Consider using `slotProps.legend` instead.
- */
- legend?: ChartsLegendProps;
/**
* Overridable component slots.
* @default {}
@@ -222,35 +213,6 @@ ScatterChart.propTypes = {
* @default yAxisIds[0] The id of the first provided axis
*/
leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
- /**
- * @deprecated Consider using `slotProps.legend` instead.
- */
- legend: PropTypes.shape({
- classes: PropTypes.object,
- direction: PropTypes.oneOf(['column', 'row']),
- hidden: PropTypes.bool,
- itemGap: PropTypes.number,
- itemMarkHeight: PropTypes.number,
- itemMarkWidth: PropTypes.number,
- labelStyle: PropTypes.object,
- markGap: PropTypes.number,
- onItemClick: PropTypes.func,
- padding: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.shape({
- bottom: PropTypes.number,
- left: PropTypes.number,
- right: PropTypes.number,
- top: PropTypes.number,
- }),
- ]),
- position: PropTypes.shape({
- horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
- vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired,
- }),
- slotProps: PropTypes.object,
- slots: PropTypes.object,
- }),
/**
* If `true`, a loading overlay is displayed.
* @default false
diff --git a/packages/x-charts/src/ScatterChart/ScatterPlot.tsx b/packages/x-charts/src/ScatterChart/ScatterPlot.tsx
index dcc8f4ebf0838..639121a8c79e8 100644
--- a/packages/x-charts/src/ScatterChart/ScatterPlot.tsx
+++ b/packages/x-charts/src/ScatterChart/ScatterPlot.tsx
@@ -59,17 +59,16 @@ function ScatterPlot(props: ScatterPlotProps) {
return (
{seriesOrder.map((seriesId) => {
- const { id, xAxisKey, yAxisKey, zAxisKey, xAxisId, yAxisId, zAxisId, markerSize, color } =
- series[seriesId];
+ const { id, xAxisId, yAxisId, zAxisId, markerSize, color } = series[seriesId];
const colorGetter = getColor(
series[seriesId],
- xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId],
- yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId],
- zAxis[zAxisId ?? zAxisKey ?? defaultZAxisId],
+ xAxis[xAxisId ?? defaultXAxisId],
+ yAxis[yAxisId ?? defaultYAxisId],
+ zAxis[zAxisId ?? defaultZAxisId],
);
- const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
- const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
+ const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
+ const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
return (
= (params) => {
return Object.keys(series)
.filter((seriesId) => {
- const axisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey;
+ const axisId = series[seriesId].xAxisId;
return axisId === axis.id || (axisId === undefined && isDefaultAxis);
})
.reduce(
@@ -23,8 +23,8 @@ export const getExtremumX: ExtremumGetter<'scatter'> = (params) => {
const filter = getFilters?.({
currentAxisId: axis.id,
isDefaultAxis,
- seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
- seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey,
+ seriesXAxisId: series[seriesId].xAxisId,
+ seriesYAxisId: series[seriesId].yAxisId,
});
const seriesMinMax = series[seriesId].data?.reduce(
@@ -47,7 +47,7 @@ export const getExtremumY: ExtremumGetter<'scatter'> = (params) => {
return Object.keys(series)
.filter((seriesId) => {
- const axisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+ const axisId = series[seriesId].yAxisId;
return axisId === axis.id || (axisId === undefined && isDefaultAxis);
})
.reduce(
@@ -55,8 +55,8 @@ export const getExtremumY: ExtremumGetter<'scatter'> = (params) => {
const filter = getFilters?.({
currentAxisId: axis.id,
isDefaultAxis,
- seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
- seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey,
+ seriesXAxisId: series[seriesId].xAxisId,
+ seriesYAxisId: series[seriesId].yAxisId,
});
const seriesMinMax = series[seriesId].data?.reduce(
diff --git a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts
index c54a3b8c7fd0c..e6ae591aa08d1 100644
--- a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts
+++ b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts
@@ -28,7 +28,6 @@ export const useScatterChartProps = (props: ScatterChartProps) => {
axisHighlight,
voronoiMaxRadius,
disableVoronoi,
- legend,
width,
height,
margin,
@@ -98,7 +97,6 @@ export const useScatterChartProps = (props: ScatterChartProps) => {
};
const legendProps: ChartsLegendProps = {
- ...legend,
slots,
slotProps,
};
diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
index d6e698333a55e..af5b7b3d8760e 100644
--- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
+++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
@@ -1,6 +1,7 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
+import { MakeOptional } from '@mui/x-internals/types';
import { BarPlot } from '../BarChart';
import { LinePlot, AreaPlot, LineHighlightPlot } from '../LineChart';
import {
@@ -16,7 +17,6 @@ import {
} from '../ChartsTooltip';
import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
-import { MakeOptional } from '../models/helpers';
import { LineSeriesType, BarSeriesType } from '../models/seriesType';
import { CardinalDirections } from '../models/layout';
import { AreaPlotSlots, AreaPlotSlotProps } from '../LineChart/AreaPlot';
diff --git a/packages/x-charts/src/context/CartesianProvider/defaultizeAxis.ts b/packages/x-charts/src/context/CartesianProvider/defaultizeAxis.ts
index 6848835d34a6c..0ae491cce71d4 100644
--- a/packages/x-charts/src/context/CartesianProvider/defaultizeAxis.ts
+++ b/packages/x-charts/src/context/CartesianProvider/defaultizeAxis.ts
@@ -1,5 +1,5 @@
+import { MakeOptional } from '@mui/x-internals/types';
import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
-import { MakeOptional } from '../../models/helpers';
import { AxisConfig, ScaleName } from '../../models';
import { ChartsAxisProps } from '../../models/axis';
diff --git a/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts b/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts
index 335b8ba592239..f89055efd50b4 100644
--- a/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts
+++ b/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts
@@ -34,10 +34,6 @@ export type HighlightOptions = 'none' | 'item' | 'series';
export type FadeOptions = 'none' | 'series' | 'global';
export type HighlightScope = {
- /**
- * @deprecated Use `highlight` instead.
- */
- highlighted?: HighlightOptions;
/**
* The scope of highlighted elements.
* - 'none': no highlight.
@@ -46,10 +42,6 @@ export type HighlightScope = {
* @default 'none'
*/
highlight?: HighlightOptions;
- /**
- * @deprecated Use `fade` instead.
- */
- faded?: FadeOptions;
/**
* The scope of faded elements.
* - 'none': no fading.
diff --git a/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx b/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx
index 23a99d9b3e39e..a5e097e067f6d 100644
--- a/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx
+++ b/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx
@@ -29,15 +29,6 @@ export type HighlightedProviderProps = {
onHighlightChange?: (highlightedItem: HighlightItemData | null) => void;
};
-const mergeDeprecatedOptions = (options?: Partial): HighlightScope => {
- const { highlighted, faded, ...other } = options ?? {};
- return {
- highlight: highlighted,
- fade: faded,
- ...other,
- };
-};
-
function HighlightedProvider({
children,
highlightedItem: highlightedItemProps,
@@ -58,7 +49,7 @@ function HighlightedProvider({
const seriesData = series[seriesType as ChartSeriesType];
Object.keys(seriesData?.series ?? {}).forEach((seriesId) => {
const seriesItem = seriesData?.series[seriesId];
- map.set(seriesId, mergeDeprecatedOptions(seriesItem?.highlightScope));
+ map.set(seriesId, seriesItem?.highlightScope);
});
});
return map;
diff --git a/packages/x-charts/src/context/ZAxisContextProvider.tsx b/packages/x-charts/src/context/ZAxisContextProvider.tsx
index 0c028a6e7fc9b..67763d9f7cc68 100644
--- a/packages/x-charts/src/context/ZAxisContextProvider.tsx
+++ b/packages/x-charts/src/context/ZAxisContextProvider.tsx
@@ -1,8 +1,8 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
+import { MakeOptional } from '@mui/x-internals/types';
import { DatasetType } from '../models/seriesType/config';
-import { MakeOptional } from '../models/helpers';
import { getColorScale, getOrdinalColorScale } from '../internals/colorScale';
import { ZAxisConfig, ZAxisDefaultized } from '../models/z-axis';
diff --git a/packages/x-charts/src/internals/SlotComponentPropsFromProps.ts b/packages/x-charts/src/internals/SlotComponentPropsFromProps.ts
deleted file mode 100644
index 7ea98c11f1bac..0000000000000
--- a/packages/x-charts/src/internals/SlotComponentPropsFromProps.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type SlotComponentPropsFromProps<
- TProps extends {},
- TOverrides extends {},
- TOwnerState extends {},
-> = (Partial & TOverrides) | ((ownerState: TOwnerState) => Partial & TOverrides);
diff --git a/packages/x-charts/src/internals/getSymbol.ts b/packages/x-charts/src/internals/getSymbol.ts
index 72d216c2e02ab..09e83d4fadba0 100644
--- a/packages/x-charts/src/internals/getSymbol.ts
+++ b/packages/x-charts/src/internals/getSymbol.ts
@@ -1,7 +1,15 @@
export type SymbolsTypes = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
-// Returns the index of a defined shape
-export function getSymbol(shape: SymbolsTypes): number {
- const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
- return symbolNames.indexOf(shape) || 0;
+export function getSymbol(shape: SymbolsTypes): number {
+ // prettier-ignore
+ switch (shape) {
+ case 'circle': return 0;
+ case 'cross': return 1;
+ case 'diamond': return 2;
+ case 'square': return 3;
+ case 'star': return 4;
+ case 'triangle': return 5;
+ case 'wye': return 6;
+ default: return 0;
+ }
}
diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts
index c8f1ffd8626bf..2c9e50be6b427 100644
--- a/packages/x-charts/src/internals/index.ts
+++ b/packages/x-charts/src/internals/index.ts
@@ -40,6 +40,5 @@ export { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum';
export * from '../models/seriesType/config';
export * from '../models/seriesType/common';
-export * from '../models/helpers';
export * from '../models/z-axis';
export * from '../models/axis';
diff --git a/packages/x-charts/src/models/seriesType/bar.ts b/packages/x-charts/src/models/seriesType/bar.ts
index 94023220b54bd..238d7c7e4cbe0 100644
--- a/packages/x-charts/src/models/seriesType/bar.ts
+++ b/packages/x-charts/src/models/seriesType/bar.ts
@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
import type { StackOffsetType } from '../stacking';
import {
CartesianSeriesType,
diff --git a/packages/x-charts/src/models/seriesType/common.ts b/packages/x-charts/src/models/seriesType/common.ts
index 5ec59cc45455e..356c8a4b4b23b 100644
--- a/packages/x-charts/src/models/seriesType/common.ts
+++ b/packages/x-charts/src/models/seriesType/common.ts
@@ -13,7 +13,7 @@ export type SeriesValueFormatterContext = {
export type SeriesValueFormatter = (
value: TValue,
context: SeriesValueFormatterContext,
-) => string;
+) => string | null;
export type CommonSeriesType = {
id?: SeriesId;
@@ -22,7 +22,7 @@ export type CommonSeriesType = {
* Formatter used to render values in tooltip or other data display.
* @param {TValue} value The series' value to render.
* @param {SeriesValueFormatterContext} context The rendering context of the value.
- * @returns {string} The string to display.
+ * @returns {string | null} The string to display or null if the value should not be shown.
*/
valueFormatter?: SeriesValueFormatter;
/**
@@ -34,16 +34,6 @@ export type CommonSeriesType = {
export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';
export type CartesianSeriesType = {
- /**
- * The id of the x-axis used to render the series.
- * @deprecated Use `xAxisId` instead
- */
- xAxisKey?: string;
- /**
- * The id of the y-axis used to render the series.
- * @deprecated Use `xAxisId` instead
- */
- yAxisKey?: string;
/**
* The id of the x-axis used to render the series.
*/
diff --git a/packages/x-charts/src/models/seriesType/config.ts b/packages/x-charts/src/models/seriesType/config.ts
index 563ca7b6ec62a..f266d53fa487a 100644
--- a/packages/x-charts/src/models/seriesType/config.ts
+++ b/packages/x-charts/src/models/seriesType/config.ts
@@ -1,3 +1,4 @@
+import { DefaultizedProps, MakeOptional } from '@mui/x-internals/types';
import {
ScatterSeriesType,
DefaultizedScatterSeriesType,
@@ -13,7 +14,6 @@ import {
PieValueType,
DefaultizedPieValueType,
} from './pie';
-import { DefaultizedProps, MakeOptional } from '../helpers';
export interface ChartsSeriesConfig {
bar: {
diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts
index f27c6f4eec49c..298d95b30cac6 100644
--- a/packages/x-charts/src/models/seriesType/line.ts
+++ b/packages/x-charts/src/models/seriesType/line.ts
@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
import type { StackOffsetType } from '../stacking';
import {
CartesianSeriesType,
diff --git a/packages/x-charts/src/models/seriesType/pie.ts b/packages/x-charts/src/models/seriesType/pie.ts
index bf87340066cb4..1ab1a6a4b5a87 100644
--- a/packages/x-charts/src/models/seriesType/pie.ts
+++ b/packages/x-charts/src/models/seriesType/pie.ts
@@ -1,5 +1,5 @@
import { PieArcDatum as D3PieArcDatum } from '@mui/x-charts-vendor/d3-shape';
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
import { CommonDefaultizedProps, CommonSeriesType, SeriesId } from './common';
export type PieItemId = string | number;
diff --git a/packages/x-charts/src/models/seriesType/scatter.ts b/packages/x-charts/src/models/seriesType/scatter.ts
index 211763f1ef36c..61f4d0c4b8089 100644
--- a/packages/x-charts/src/models/seriesType/scatter.ts
+++ b/packages/x-charts/src/models/seriesType/scatter.ts
@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, SeriesId } from './common';
export type ScatterValueType = {
@@ -24,11 +24,6 @@ export interface ScatterSeriesType extends CommonSeriesType, C
* @default false
*/
disableHover?: boolean;
- /**
- * The id of the z-axis used to render the series.
- * @deprecated Use `zAxisId` instead.
- */
- zAxisKey?: string;
/**
* The id of the z-axis used to render the series.
*/
diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md
index 453f783b567d3..af1290cabb817 100644
--- a/packages/x-codemod/README.md
+++ b/packages/x-codemod/README.md
@@ -13,7 +13,7 @@ This repository contains a collection of codemod scripts based for use with
```bash
-npx @mui/x-codemod@latest
+npx @mui/x-codemod@next
{
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleOut = (event) => {
+ if (event.pointerType !== 'mouse') {
+ setPointer((prev) => ({
+ ...prev,
+ isActive: false,
+ }));
+ }
+ };
+
+ const handleEnter = (event) => {
+ setPointer({
+ isActive: true,
+ isMousePointer: event.pointerType === 'mouse',
+ pointerHeight: event.height,
+ });
+ };
+
+ const handleMove = (event) => {
+ positionRef.current = {
+ x: event.clientX,
+ y: event.clientY,
+ };
+ popperRef.current?.update();
+ };
+
+ element.addEventListener('pointerenter', handleEnter);
+ element.addEventListener('pointerup', handleOut);
+ element.addEventListener('pointermove', handleMove);
+
+ return () => {
+ element.removeEventListener('pointerenter', handleEnter);
+ element.removeEventListener('pointerup', handleOut);
+ element.removeEventListener('pointermove', handleMove);
+ };
+ }, [svgRef]);
+
+ return {
+ ...pointer,
+ popperRef,
+ anchorEl: {
+ getBoundingClientRect: () => ({
+ x: positionRef.current.x,
+ y: positionRef.current.y,
+ top: positionRef.current.y,
+ left: positionRef.current.x,
+ right: positionRef.current.x,
+ bottom: positionRef.current.y,
+ width: 0,
+ height: 0,
+ toJSON: () => '',
+ }),
+ },
+ };
+}
export function CustomItemTooltip() {
const tooltipData = useItemTooltip();
- const mousePosition = useMouseTracker(); // Track the mouse position on chart.
+ const { isActive, isMousePointer, pointerHeight, popperRef, anchorEl } =
+ usePointer();
- if (!tooltipData || !mousePosition) {
+ if (!tooltipData || !isActive) {
// No data to display
return null;
}
- // The pointer type can be used to have different behavior based on pointer type.
- const isMousePointer = mousePosition?.pointerType === 'mouse';
// Adapt the tooltip offset to the size of the pointer.
- const yOffset = isMousePointer ? 0 : 40 - mousePosition.height;
+ const yOffset = isMousePointer ? 0 : 40 - pointerHeight;
return (
@@ -30,7 +102,8 @@ export function CustomItemTooltip() {
}}
open
placement={isMousePointer ? 'top-end' : 'top'}
- anchorEl={generateVirtualElement(mousePosition)}
+ anchorEl={anchorEl}
+ popperRef={popperRef}
modifiers={[
{
name: 'offset',
diff --git a/docs/data/charts/tooltip/CustomItemTooltip.tsx b/docs/data/charts/tooltip/CustomItemTooltip.tsx
index fcaf28469db1f..077243411c5d3 100644
--- a/docs/data/charts/tooltip/CustomItemTooltip.tsx
+++ b/docs/data/charts/tooltip/CustomItemTooltip.tsx
@@ -1,25 +1,103 @@
import * as React from 'react';
import NoSsr from '@mui/material/NoSsr';
-import Popper from '@mui/material/Popper';
+import Popper, { PopperProps } from '@mui/material/Popper';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
-import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip';
-import { generateVirtualElement } from './generateVirtualElement';
+import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useSvgRef } from '@mui/x-charts/hooks';
+
+type PointerState = {
+ isActive: boolean;
+ isMousePointer: boolean;
+ pointerHeight: number;
+};
+
+function usePointer(): PointerState & Pick {
+ const svgRef = useSvgRef();
+ const popperRef: PopperProps['popperRef'] = React.useRef(null);
+ const positionRef = React.useRef({ x: 0, y: 0 });
+
+ // Use a ref to avoid rerendering on every mousemove event.
+ const [pointer, setPointer] = React.useState({
+ isActive: false,
+ isMousePointer: false,
+ pointerHeight: 0,
+ });
+
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleOut = (event: PointerEvent) => {
+ if (event.pointerType !== 'mouse') {
+ setPointer((prev) => ({
+ ...prev,
+ isActive: false,
+ }));
+ }
+ };
+
+ const handleEnter = (event: PointerEvent) => {
+ setPointer({
+ isActive: true,
+ isMousePointer: event.pointerType === 'mouse',
+ pointerHeight: event.height,
+ });
+ };
+
+ const handleMove = (event: PointerEvent) => {
+ positionRef.current = {
+ x: event.clientX,
+ y: event.clientY,
+ };
+ popperRef.current?.update();
+ };
+
+ element.addEventListener('pointerenter', handleEnter);
+ element.addEventListener('pointerup', handleOut);
+ element.addEventListener('pointermove', handleMove);
+
+ return () => {
+ element.removeEventListener('pointerenter', handleEnter);
+ element.removeEventListener('pointerup', handleOut);
+ element.removeEventListener('pointermove', handleMove);
+ };
+ }, [svgRef]);
+
+ return {
+ ...pointer,
+ popperRef,
+ anchorEl: {
+ getBoundingClientRect: () => ({
+ x: positionRef.current.x,
+ y: positionRef.current.y,
+ top: positionRef.current.y,
+ left: positionRef.current.x,
+ right: positionRef.current.x,
+ bottom: positionRef.current.y,
+ width: 0,
+ height: 0,
+ toJSON: () => '',
+ }),
+ },
+ };
+}
export function CustomItemTooltip() {
const tooltipData = useItemTooltip();
- const mousePosition = useMouseTracker(); // Track the mouse position on chart.
+ const { isActive, isMousePointer, pointerHeight, popperRef, anchorEl } =
+ usePointer();
- if (!tooltipData || !mousePosition) {
+ if (!tooltipData || !isActive) {
// No data to display
return null;
}
- // The pointer type can be used to have different behavior based on pointer type.
- const isMousePointer = mousePosition?.pointerType === 'mouse';
// Adapt the tooltip offset to the size of the pointer.
- const yOffset = isMousePointer ? 0 : 40 - mousePosition.height;
+ const yOffset = isMousePointer ? 0 : 40 - pointerHeight;
return (
@@ -30,7 +108,8 @@ export function CustomItemTooltip() {
}}
open
placement={isMousePointer ? 'top-end' : 'top'}
- anchorEl={generateVirtualElement(mousePosition)}
+ anchorEl={anchorEl}
+ popperRef={popperRef}
modifiers={[
{
name: 'offset',
diff --git a/docs/data/charts/tooltip/Interaction.js b/docs/data/charts/tooltip/Interaction.js
index a7e6142713d69..04a4a516f511f 100644
--- a/docs/data/charts/tooltip/Interaction.js
+++ b/docs/data/charts/tooltip/Interaction.js
@@ -16,11 +16,7 @@ const barChartsParams = {
],
margin: { top: 10, right: 10 },
height: 200,
- slotProps: {
- legend: {
- hidden: true,
- },
- },
+ slotProps: { legend: { hidden: true } },
};
export default function Interaction() {
return (
diff --git a/docs/data/charts/tooltip/Interaction.tsx b/docs/data/charts/tooltip/Interaction.tsx
index 2920b6d6b2e24..70cbd6c201f89 100644
--- a/docs/data/charts/tooltip/Interaction.tsx
+++ b/docs/data/charts/tooltip/Interaction.tsx
@@ -16,11 +16,7 @@ const barChartsParams = {
],
margin: { top: 10, right: 10 },
height: 200,
- slotProps: {
- legend: {
- hidden: true,
- },
- },
+ slotProps: { legend: { hidden: true } },
};
export default function Interaction() {
return (
diff --git a/docs/data/charts/tooltip/ItemTooltip.js b/docs/data/charts/tooltip/ItemTooltip.js
index 68fbab1d77ae0..4e3b52476e277 100644
--- a/docs/data/charts/tooltip/ItemTooltip.js
+++ b/docs/data/charts/tooltip/ItemTooltip.js
@@ -1,23 +1,95 @@
import * as React from 'react';
import NoSsr from '@mui/material/NoSsr';
import Popper from '@mui/material/Popper';
-import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip';
+import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useSvgRef } from '@mui/x-charts/hooks';
import { CustomItemTooltipContent } from './CustomItemTooltipContent';
-import { generateVirtualElement } from './generateVirtualElement';
+
+function usePointer() {
+ const svgRef = useSvgRef();
+ const popperRef = React.useRef(null);
+ const positionRef = React.useRef({ x: 0, y: 0 });
+
+ // Use a ref to avoid rerendering on every mousemove event.
+ const [pointer, setPointer] = React.useState({
+ isActive: false,
+ isMousePointer: false,
+ pointerHeight: 0,
+ });
+
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleOut = (event) => {
+ if (event.pointerType !== 'mouse') {
+ setPointer((prev) => ({
+ ...prev,
+ isActive: false,
+ }));
+ }
+ };
+
+ const handleEnter = (event) => {
+ setPointer({
+ isActive: true,
+ isMousePointer: event.pointerType === 'mouse',
+ pointerHeight: event.height,
+ });
+ };
+
+ const handleMove = (event) => {
+ positionRef.current = {
+ x: event.clientX,
+ y: event.clientY,
+ };
+ popperRef.current?.update();
+ };
+
+ element.addEventListener('pointerenter', handleEnter);
+ element.addEventListener('pointerup', handleOut);
+ element.addEventListener('pointermove', handleMove);
+
+ return () => {
+ element.removeEventListener('pointerenter', handleEnter);
+ element.removeEventListener('pointerup', handleOut);
+ element.removeEventListener('pointermove', handleMove);
+ };
+ }, [svgRef]);
+
+ return {
+ ...pointer,
+ popperRef,
+ anchorEl: {
+ getBoundingClientRect: () => ({
+ x: positionRef.current.x,
+ y: positionRef.current.y,
+ top: positionRef.current.y,
+ left: positionRef.current.x,
+ right: positionRef.current.x,
+ bottom: positionRef.current.y,
+ width: 0,
+ height: 0,
+ toJSON: () => '',
+ }),
+ },
+ };
+}
export function ItemTooltip() {
const tooltipData = useItemTooltip();
- const mousePosition = useMouseTracker(); // Track the mouse position on chart.
+ const { isActive, isMousePointer, pointerHeight, popperRef, anchorEl } =
+ usePointer();
- if (!tooltipData || !mousePosition) {
+ if (!tooltipData || !isActive) {
// No data to display
return null;
}
- // The pointer type can be used to have different behavior based on pointer type.
- const isMousePointer = mousePosition?.pointerType === 'mouse';
// Adapt the tooltip offset to the size of the pointer.
- const yOffset = isMousePointer ? 0 : 40 - mousePosition.height;
+ const yOffset = isMousePointer ? 0 : 40 - pointerHeight;
return (
@@ -28,7 +100,8 @@ export function ItemTooltip() {
}}
open
placement={isMousePointer ? 'top-end' : 'top'}
- anchorEl={generateVirtualElement(mousePosition)}
+ anchorEl={anchorEl}
+ popperRef={popperRef}
modifiers={[
{
name: 'offset',
diff --git a/docs/data/charts/tooltip/ItemTooltip.tsx b/docs/data/charts/tooltip/ItemTooltip.tsx
index 68fbab1d77ae0..1f4277d578c7f 100644
--- a/docs/data/charts/tooltip/ItemTooltip.tsx
+++ b/docs/data/charts/tooltip/ItemTooltip.tsx
@@ -1,23 +1,101 @@
import * as React from 'react';
import NoSsr from '@mui/material/NoSsr';
-import Popper from '@mui/material/Popper';
-import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip';
+import Popper, { PopperProps } from '@mui/material/Popper';
+import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useSvgRef } from '@mui/x-charts/hooks';
import { CustomItemTooltipContent } from './CustomItemTooltipContent';
-import { generateVirtualElement } from './generateVirtualElement';
+
+type PointerState = {
+ isActive: boolean;
+ isMousePointer: boolean;
+ pointerHeight: number;
+};
+
+function usePointer(): PointerState & Pick {
+ const svgRef = useSvgRef();
+ const popperRef: PopperProps['popperRef'] = React.useRef(null);
+ const positionRef = React.useRef({ x: 0, y: 0 });
+
+ // Use a ref to avoid rerendering on every mousemove event.
+ const [pointer, setPointer] = React.useState({
+ isActive: false,
+ isMousePointer: false,
+ pointerHeight: 0,
+ });
+
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleOut = (event: PointerEvent) => {
+ if (event.pointerType !== 'mouse') {
+ setPointer((prev) => ({
+ ...prev,
+ isActive: false,
+ }));
+ }
+ };
+
+ const handleEnter = (event: PointerEvent) => {
+ setPointer({
+ isActive: true,
+ isMousePointer: event.pointerType === 'mouse',
+ pointerHeight: event.height,
+ });
+ };
+
+ const handleMove = (event: PointerEvent) => {
+ positionRef.current = {
+ x: event.clientX,
+ y: event.clientY,
+ };
+ popperRef.current?.update();
+ };
+
+ element.addEventListener('pointerenter', handleEnter);
+ element.addEventListener('pointerup', handleOut);
+ element.addEventListener('pointermove', handleMove);
+
+ return () => {
+ element.removeEventListener('pointerenter', handleEnter);
+ element.removeEventListener('pointerup', handleOut);
+ element.removeEventListener('pointermove', handleMove);
+ };
+ }, [svgRef]);
+
+ return {
+ ...pointer,
+ popperRef,
+ anchorEl: {
+ getBoundingClientRect: () => ({
+ x: positionRef.current.x,
+ y: positionRef.current.y,
+ top: positionRef.current.y,
+ left: positionRef.current.x,
+ right: positionRef.current.x,
+ bottom: positionRef.current.y,
+ width: 0,
+ height: 0,
+ toJSON: () => '',
+ }),
+ },
+ };
+}
export function ItemTooltip() {
const tooltipData = useItemTooltip();
- const mousePosition = useMouseTracker(); // Track the mouse position on chart.
+ const { isActive, isMousePointer, pointerHeight, popperRef, anchorEl } =
+ usePointer();
- if (!tooltipData || !mousePosition) {
+ if (!tooltipData || !isActive) {
// No data to display
return null;
}
- // The pointer type can be used to have different behavior based on pointer type.
- const isMousePointer = mousePosition?.pointerType === 'mouse';
// Adapt the tooltip offset to the size of the pointer.
- const yOffset = isMousePointer ? 0 : 40 - mousePosition.height;
+ const yOffset = isMousePointer ? 0 : 40 - pointerHeight;
return (
@@ -28,7 +106,8 @@ export function ItemTooltip() {
}}
open
placement={isMousePointer ? 'top-end' : 'top'}
- anchorEl={generateVirtualElement(mousePosition)}
+ anchorEl={anchorEl}
+ popperRef={popperRef}
modifiers={[
{
name: 'offset',
diff --git a/docs/data/charts/tooltip/ItemTooltipFixedY.js b/docs/data/charts/tooltip/ItemTooltipFixedY.js
index 4e19cd1bc9f62..aa11e750dc8dd 100644
--- a/docs/data/charts/tooltip/ItemTooltipFixedY.js
+++ b/docs/data/charts/tooltip/ItemTooltipFixedY.js
@@ -1,28 +1,90 @@
import * as React from 'react';
import NoSsr from '@mui/material/NoSsr';
import Popper from '@mui/material/Popper';
-import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip';
+import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks';
import { CustomItemTooltipContent } from './CustomItemTooltipContent';
-import { generateVirtualElement } from './generateVirtualElement';
+
+function usePointer() {
+ const svgRef = useSvgRef();
+
+ // Use a ref to avoid rerendering on every mousemove event.
+ const [pointer, setPointer] = React.useState({
+ isActive: false,
+ isMousePointer: false,
+ pointerHeight: 0,
+ });
+
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleOut = (event) => {
+ if (event.pointerType !== 'mouse') {
+ setPointer((prev) => ({
+ ...prev,
+ isActive: false,
+ }));
+ }
+ };
+
+ const handleEnter = (event) => {
+ setPointer({
+ isActive: true,
+ isMousePointer: event.pointerType === 'mouse',
+ pointerHeight: event.height,
+ });
+ };
+
+ element.addEventListener('pointerenter', handleEnter);
+ element.addEventListener('pointerup', handleOut);
+
+ return () => {
+ element.removeEventListener('pointerenter', handleEnter);
+ element.removeEventListener('pointerup', handleOut);
+ };
+ }, [svgRef]);
+
+ return pointer;
+}
export function ItemTooltipFixedY() {
const tooltipData = useItemTooltip();
- const mousePosition = useMouseTracker();
+ const { isActive } = usePointer();
+
+ const popperRef = React.useRef(null);
+ const positionRef = React.useRef({ x: 0, y: 0 });
const svgRef = useSvgRef(); // Get the ref of the component.
const drawingArea = useDrawingArea(); // Get the dimensions of the chart inside the .
- if (!tooltipData || !mousePosition) {
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleMove = (event) => {
+ positionRef.current = {
+ x: event.clientX,
+ y: event.clientY,
+ };
+ popperRef.current?.update();
+ };
+
+ element.addEventListener('pointermove', handleMove);
+
+ return () => {
+ element.removeEventListener('pointermove', handleMove);
+ };
+ }, [svgRef, drawingArea.top]);
+
+ if (!tooltipData || !isActive) {
// No data to display
return null;
}
- const tooltipPosition = {
- ...mousePosition,
- // Add the y-coordinate of the to the to margin between the and the drawing area
- y: svgRef.current.getBoundingClientRect().top + drawingArea.top,
- };
-
return (
({
+ x: positionRef.current.x,
+ y: positionRef.current.y,
+ top: positionRef.current.y,
+ left: positionRef.current.x,
+ right: positionRef.current.x,
+ bottom: positionRef.current.y,
+ width: 0,
+ height: 0,
+ toJSON: () => '',
+ }),
+ }}
+ popperRef={popperRef}
>
diff --git a/docs/data/charts/tooltip/ItemTooltipFixedY.tsx b/docs/data/charts/tooltip/ItemTooltipFixedY.tsx
index 3059c260afcac..925b27453789c 100644
--- a/docs/data/charts/tooltip/ItemTooltipFixedY.tsx
+++ b/docs/data/charts/tooltip/ItemTooltipFixedY.tsx
@@ -1,28 +1,96 @@
import * as React from 'react';
import NoSsr from '@mui/material/NoSsr';
-import Popper from '@mui/material/Popper';
-import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip';
+import Popper, { PopperProps } from '@mui/material/Popper';
+import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks';
import { CustomItemTooltipContent } from './CustomItemTooltipContent';
-import { generateVirtualElement, MousePosition } from './generateVirtualElement';
+
+type PointerState = {
+ isActive: boolean;
+ isMousePointer: boolean;
+ pointerHeight: number;
+};
+
+function usePointer(): PointerState {
+ const svgRef = useSvgRef();
+
+ // Use a ref to avoid rerendering on every mousemove event.
+ const [pointer, setPointer] = React.useState({
+ isActive: false,
+ isMousePointer: false,
+ pointerHeight: 0,
+ });
+
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleOut = (event: PointerEvent) => {
+ if (event.pointerType !== 'mouse') {
+ setPointer((prev) => ({
+ ...prev,
+ isActive: false,
+ }));
+ }
+ };
+
+ const handleEnter = (event: PointerEvent) => {
+ setPointer({
+ isActive: true,
+ isMousePointer: event.pointerType === 'mouse',
+ pointerHeight: event.height,
+ });
+ };
+
+ element.addEventListener('pointerenter', handleEnter);
+ element.addEventListener('pointerup', handleOut);
+
+ return () => {
+ element.removeEventListener('pointerenter', handleEnter);
+ element.removeEventListener('pointerup', handleOut);
+ };
+ }, [svgRef]);
+
+ return pointer;
+}
export function ItemTooltipFixedY() {
const tooltipData = useItemTooltip();
- const mousePosition = useMouseTracker();
+ const { isActive } = usePointer();
+
+ const popperRef: PopperProps['popperRef'] = React.useRef(null);
+ const positionRef = React.useRef({ x: 0, y: 0 });
const svgRef = useSvgRef(); // Get the ref of the component.
const drawingArea = useDrawingArea(); // Get the dimensions of the chart inside the .
- if (!tooltipData || !mousePosition) {
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleMove = (event: PointerEvent) => {
+ positionRef.current = {
+ x: event.clientX,
+ y: event.clientY,
+ };
+ popperRef.current?.update();
+ };
+
+ element.addEventListener('pointermove', handleMove);
+
+ return () => {
+ element.removeEventListener('pointermove', handleMove);
+ };
+ }, [svgRef, drawingArea.top]);
+
+ if (!tooltipData || !isActive) {
// No data to display
return null;
}
- const tooltipPosition: MousePosition = {
- ...mousePosition,
- // Add the y-coordinate of the to the to margin between the and the drawing area
- y: svgRef.current.getBoundingClientRect().top + drawingArea.top,
- };
-
return (
({
+ x: positionRef.current.x,
+ y: positionRef.current.y,
+ top: positionRef.current.y,
+ left: positionRef.current.x,
+ right: positionRef.current.x,
+ bottom: positionRef.current.y,
+ width: 0,
+ height: 0,
+ toJSON: () => '',
+ }),
+ }}
+ popperRef={popperRef}
>
diff --git a/docs/data/charts/tooltip/ItemTooltipTopElement.js b/docs/data/charts/tooltip/ItemTooltipTopElement.js
index 7d86e69b81e40..538a729564c9b 100644
--- a/docs/data/charts/tooltip/ItemTooltipTopElement.js
+++ b/docs/data/charts/tooltip/ItemTooltipTopElement.js
@@ -2,14 +2,58 @@ import * as React from 'react';
import NoSsr from '@mui/material/NoSsr';
import Popper from '@mui/material/Popper';
-import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip';
+import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
import { useSvgRef, useXAxis, useXScale, useYScale } from '@mui/x-charts/hooks';
import { CustomItemTooltipContent } from './CustomItemTooltipContent';
-import { generateVirtualElement } from './generateVirtualElement';
+
+function usePointer() {
+ const svgRef = useSvgRef();
+
+ // Use a ref to avoid rerendering on every mousemove event.
+ const [pointer, setPointer] = React.useState({
+ isActive: false,
+ isMousePointer: false,
+ pointerHeight: 0,
+ });
+
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleOut = (event) => {
+ if (event.pointerType !== 'mouse') {
+ setPointer((prev) => ({
+ ...prev,
+ isActive: false,
+ }));
+ }
+ };
+
+ const handleEnter = (event) => {
+ setPointer({
+ isActive: true,
+ isMousePointer: event.pointerType === 'mouse',
+ pointerHeight: event.height,
+ });
+ };
+
+ element.addEventListener('pointerenter', handleEnter);
+ element.addEventListener('pointerup', handleOut);
+
+ return () => {
+ element.removeEventListener('pointerenter', handleEnter);
+ element.removeEventListener('pointerup', handleOut);
+ };
+ }, [svgRef]);
+
+ return pointer;
+}
export function ItemTooltipTopElement() {
const tooltipData = useItemTooltip();
- const mousePosition = useMouseTracker();
+ const { isActive } = usePointer();
// Get xAxis config to access its data array.
const xAxis = useXAxis();
// Get the scale which map values to SVG coordinates.
@@ -21,7 +65,7 @@ export function ItemTooltipTopElement() {
// Get the ref of the component.
const svgRef = useSvgRef();
- if (!tooltipData || !mousePosition || !xAxis.data) {
+ if (!tooltipData || !isActive || !xAxis.data) {
// No data to display
return null;
}
@@ -41,7 +85,6 @@ export function ItemTooltipTopElement() {
const svgXPosition = xScale(xValue) ?? 0;
const tooltipPosition = {
- ...mousePosition,
// Add half of `yScale.step()` to be in the middle of the band.
x:
svgRef.current.getBoundingClientRect().left + svgXPosition + xScale.step() / 2,
@@ -58,7 +101,19 @@ export function ItemTooltipTopElement() {
}}
open
placement="top"
- anchorEl={generateVirtualElement(tooltipPosition)}
+ anchorEl={{
+ getBoundingClientRect: () => ({
+ x: tooltipPosition.x,
+ y: tooltipPosition.y,
+ top: tooltipPosition.y,
+ left: tooltipPosition.x,
+ right: tooltipPosition.x,
+ bottom: tooltipPosition.y,
+ width: 0,
+ height: 0,
+ toJSON: () => '',
+ }),
+ }}
>
({
+ isActive: false,
+ isMousePointer: false,
+ pointerHeight: 0,
+ });
+
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleOut = (event: PointerEvent) => {
+ if (event.pointerType !== 'mouse') {
+ setPointer((prev) => ({
+ ...prev,
+ isActive: false,
+ }));
+ }
+ };
+
+ const handleEnter = (event: PointerEvent) => {
+ setPointer({
+ isActive: true,
+ isMousePointer: event.pointerType === 'mouse',
+ pointerHeight: event.height,
+ });
+ };
+
+ element.addEventListener('pointerenter', handleEnter);
+ element.addEventListener('pointerup', handleOut);
+
+ return () => {
+ element.removeEventListener('pointerenter', handleEnter);
+ element.removeEventListener('pointerup', handleOut);
+ };
+ }, [svgRef]);
+
+ return pointer;
+}
export function ItemTooltipTopElement() {
const tooltipData = useItemTooltip<'bar'>();
- const mousePosition = useMouseTracker();
+ const { isActive } = usePointer();
// Get xAxis config to access its data array.
const xAxis = useXAxis();
// Get the scale which map values to SVG coordinates.
@@ -21,7 +71,7 @@ export function ItemTooltipTopElement() {
// Get the ref of the component.
const svgRef = useSvgRef();
- if (!tooltipData || !mousePosition || !xAxis.data) {
+ if (!tooltipData || !isActive || !xAxis.data) {
// No data to display
return null;
}
@@ -40,8 +90,7 @@ export function ItemTooltipTopElement() {
const svgYPosition = yScale(tooltipData.value) ?? 0;
const svgXPosition = xScale(xValue) ?? 0;
- const tooltipPosition: MousePosition = {
- ...mousePosition,
+ const tooltipPosition = {
// Add half of `yScale.step()` to be in the middle of the band.
x:
svgRef.current.getBoundingClientRect().left +
@@ -60,7 +109,19 @@ export function ItemTooltipTopElement() {
}}
open
placement="top"
- anchorEl={generateVirtualElement(tooltipPosition)}
+ anchorEl={{
+ getBoundingClientRect: () => ({
+ x: tooltipPosition.x,
+ y: tooltipPosition.y,
+ top: tooltipPosition.y,
+ left: tooltipPosition.x,
+ right: tooltipPosition.x,
+ bottom: tooltipPosition.y,
+ width: 0,
+ height: 0,
+ toJSON: () => '',
+ }),
+ }}
>
({
- color: ownerState.open ? 'secondary' : 'primary',
+ color: ownerState.isPickerOpen ? 'secondary' : 'primary',
}),
}}
/>
diff --git a/docs/data/common-concepts/custom-components/CustomSlotPropsCallback.tsx b/docs/data/common-concepts/custom-components/CustomSlotPropsCallback.tsx
index e1272f2776bad..ea3b72c58ed1c 100644
--- a/docs/data/common-concepts/custom-components/CustomSlotPropsCallback.tsx
+++ b/docs/data/common-concepts/custom-components/CustomSlotPropsCallback.tsx
@@ -9,7 +9,7 @@ export default function CustomSlotPropsCallback() {
({
- color: ownerState.open ? 'secondary' : 'primary',
+ color: ownerState.isPickerOpen ? 'secondary' : 'primary',
}),
}}
/>
diff --git a/docs/data/common-concepts/custom-components/CustomSlotPropsCallback.tsx.preview b/docs/data/common-concepts/custom-components/CustomSlotPropsCallback.tsx.preview
index 100188718fae0..70bc3e35f25ec 100644
--- a/docs/data/common-concepts/custom-components/CustomSlotPropsCallback.tsx.preview
+++ b/docs/data/common-concepts/custom-components/CustomSlotPropsCallback.tsx.preview
@@ -1,7 +1,7 @@
({
- color: ownerState.open ? 'secondary' : 'primary',
+ color: ownerState.isPickerOpen ? 'secondary' : 'primary',
}),
}}
/>
\ No newline at end of file
diff --git a/docs/data/common-concepts/custom-components/custom-components.md b/docs/data/common-concepts/custom-components/custom-components.md
index cd89c78cbe620..1875037ac5bfa 100644
--- a/docs/data/common-concepts/custom-components/custom-components.md
+++ b/docs/data/common-concepts/custom-components/custom-components.md
@@ -11,7 +11,7 @@ This is the role of all the `baseXXX` component on the Data Grid component (`bas
These slots receive props that should be as generic as possible so that it is easy to interface any other design system.
Other slots allow you to override parts of the MUI X UI components with a custom UI built specifically for this component.
-This is the role of slots like `calendarHeader` on the `DateCalendar` component or `item` on the `RichTreeView` component.
+This is the role of slots like `calendarHeader` on the `DateCalendar` component or `item` on the Rich Tree View component.
These slots receive props specific to this part of the UI and will most likely not be re-use throughout your application.
## Basic usage
diff --git a/docs/data/data-grid/column-definition/AutogeneratedRows.js b/docs/data/data-grid/column-definition/AutogeneratedRows.js
index d5689bc6ecbdb..b9059be151f09 100644
--- a/docs/data/data-grid/column-definition/AutogeneratedRows.js
+++ b/docs/data/data-grid/column-definition/AutogeneratedRows.js
@@ -1,6 +1,7 @@
import * as React from 'react';
import {
DataGridPremium,
+ GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
isAutogeneratedRow,
useGridApiRef,
useKeepGroupedColumnsHidden,
@@ -8,7 +9,7 @@ import {
import { useMovieData } from '@mui/x-data-grid-generator';
const columns = [
- { field: '__row_group_by_columns_group__', width: 200 },
+ { field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, width: 200 },
{ field: 'company', width: 200 },
{
field: 'title',
diff --git a/docs/data/data-grid/column-definition/AutogeneratedRows.tsx b/docs/data/data-grid/column-definition/AutogeneratedRows.tsx
index c58c4bf79e2de..cb127be3cb889 100644
--- a/docs/data/data-grid/column-definition/AutogeneratedRows.tsx
+++ b/docs/data/data-grid/column-definition/AutogeneratedRows.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import {
DataGridPremium,
+ GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
GridColDef,
isAutogeneratedRow,
useGridApiRef,
@@ -9,7 +10,7 @@ import {
import { useMovieData } from '@mui/x-data-grid-generator';
const columns: GridColDef[] = [
- { field: '__row_group_by_columns_group__', width: 200 },
+ { field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, width: 200 },
{ field: 'company', width: 200 },
{
field: 'title',
diff --git a/docs/data/data-grid/column-definition/column-definition.md b/docs/data/data-grid/column-definition/column-definition.md
index 75364b0c7c816..89c245b09175b 100644
--- a/docs/data/data-grid/column-definition/column-definition.md
+++ b/docs/data/data-grid/column-definition/column-definition.md
@@ -102,8 +102,8 @@ Read more in the [handling autogenerated rows](/x/react-data-grid/column-definit
:::
:::warning
-[Row grouping](/x/react-data-grid/row-grouping/) uses the [`groupingValueGetter`](/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value) instead of `valueGetter` to get the value for the grouping.
-The value passed to the `groupingValueGetter` is the raw row value (`row[field]`) even if the column definition has a `valueGetter` defined.
+[Row grouping](/x/react-data-grid/row-grouping/) uses the [`groupingValueGetter()`](/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value) instead of `valueGetter` to get the value for the grouping.
+The value passed to the `groupingValueGetter()` is the raw row value (`row[field]`) even if the column definition has a `valueGetter` defined.
:::
### Value formatter
diff --git a/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.js b/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.js
index bfa80b2c25232..96ed3a295aa25 100644
--- a/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.js
+++ b/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.js
@@ -4,10 +4,11 @@ import {
GridToolbar,
useKeepGroupedColumnsHidden,
useGridApiRef,
+ GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
-const hiddenFields = ['id', '__row_group_by_columns_group__', 'status'];
+const hiddenFields = ['id', GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, 'status'];
const getTogglableColumns = (columns) => {
return columns
diff --git a/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.tsx b/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.tsx
index 9c667a5f013ef..83eb196585b7a 100644
--- a/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.tsx
+++ b/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.tsx
@@ -5,10 +5,11 @@ import {
GridColDef,
useKeepGroupedColumnsHidden,
useGridApiRef,
+ GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
-const hiddenFields = ['id', '__row_group_by_columns_group__', 'status'];
+const hiddenFields = ['id', GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, 'status'];
const getTogglableColumns = (columns: GridColDef[]) => {
return columns
diff --git a/docs/data/data-grid/column-visibility/column-visibility.md b/docs/data/data-grid/column-visibility/column-visibility.md
index 08d912a07057d..3b7a149dd7012 100644
--- a/docs/data/data-grid/column-visibility/column-visibility.md
+++ b/docs/data/data-grid/column-visibility/column-visibility.md
@@ -86,8 +86,13 @@ In the following demo, the columns panel is disabled, and access to columns `id`
To show or hide specific columns in the column visibility panel, use the `slotProps.columnsManagement.getTogglableColumns` prop. It should return an array of column field names.
```tsx
-// stop `id`, `__row_group_by_columns_group__`, and `status` columns to be togglable
-const hiddenFields = ['id', '__row_group_by_columns_group__', 'status'];
+import {
+ DataGridPremium,
+ GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
+} from '@mui/x-data-grid-premium';
+
+// stop `id`, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, and `status` columns to be togglable
+const hiddenFields = ['id', GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, 'status'];
const getTogglableColumns = (columns: GridColDef[]) => {
return columns
@@ -95,7 +100,7 @@ const getTogglableColumns = (columns: GridColDef[]) => {
.map((column) => column.field);
};
-Using the Data Grid with Joy UI components
+
+
+
{
+ console.log(`send message to ${params.row.phone}`);
+ };
+ return (
+
+
+ );
+}
+
+function ListViewCell(params) {
+ return (
+
+
+
+ {params.row.name}
+
+
+ {params.row.position}
+
+
+
+ );
+}
+
+const listColDef = {
+ field: 'listColumn',
+ renderCell: ListViewCell,
+};
+
+const VISIBLE_FIELDS = ['avatar', 'name', 'position'];
+
+export default function ListView() {
+ const [isListView, setIsListView] = React.useState(true);
+
+ const { data } = useDemoData({
+ dataSet: 'Employee',
+ rowLength: 20,
+ visibleFields: VISIBLE_FIELDS,
+ });
+
+ const columns = React.useMemo(() => {
+ return [
+ ...data.columns,
+ {
+ type: 'actions',
+ field: 'actions',
+ width: 75,
+ getActions: (params) => [
+ setIsListView(event.target.checked)}
+ />
+ }
+ label="Enable list view"
+ />
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/ListView.tsx b/docs/data/data-grid/list-view/ListView.tsx
new file mode 100644
index 0000000000000..40239d5a8e41a
--- /dev/null
+++ b/docs/data/data-grid/list-view/ListView.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+import {
+ DataGridPro,
+ GridRenderCellParams,
+ GridListColDef,
+ GridColDef,
+ GridRowParams,
+} from '@mui/x-data-grid-pro';
+import Box from '@mui/material/Box';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Stack from '@mui/material/Stack';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import IconButton from '@mui/material/IconButton';
+import MessageIcon from '@mui/icons-material/Message';
+
+function MessageAction(params: Pick) {
+ const handleMessage = () => {
+ console.log(`send message to ${params.row.phone}`);
+ };
+ return (
+
+
+ );
+}
+
+function ListViewCell(params: GridRenderCellParams) {
+ return (
+
+
+
+ {params.row.name}
+
+
+ {params.row.position}
+
+
+
+ );
+}
+
+const listColDef: GridListColDef = {
+ field: 'listColumn',
+ renderCell: ListViewCell,
+};
+
+const VISIBLE_FIELDS = ['avatar', 'name', 'position'];
+
+export default function ListView() {
+ const [isListView, setIsListView] = React.useState(true);
+
+ const { data } = useDemoData({
+ dataSet: 'Employee',
+ rowLength: 20,
+ visibleFields: VISIBLE_FIELDS,
+ });
+
+ const columns: GridColDef[] = React.useMemo(() => {
+ return [
+ ...data.columns,
+ {
+ type: 'actions',
+ field: 'actions',
+ width: 75,
+ getActions: (params) => [
+ setIsListView(event.target.checked)}
+ />
+ }
+ label="Enable list view"
+ />
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/ListViewAdvanced.js b/docs/data/data-grid/list-view/ListViewAdvanced.js
new file mode 100644
index 0000000000000..2185d42a142d7
--- /dev/null
+++ b/docs/data/data-grid/list-view/ListViewAdvanced.js
@@ -0,0 +1,361 @@
+import * as React from 'react';
+import {
+ GridActionsCellItem,
+ useGridApiRef,
+ DataGridPremium,
+ gridClasses,
+} from '@mui/x-data-grid-premium';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Avatar from '@mui/material/Avatar';
+import Stack from '@mui/material/Stack';
+import OpenIcon from '@mui/icons-material/Visibility';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import CSSBaseline from '@mui/material/CssBaseline';
+import { randomId } from '@mui/x-data-grid-generator';
+import { FileIcon } from './components/FileIcon';
+import { DetailsDrawer } from './components/DetailsDrawer';
+import { ListCell } from './components/ListCell';
+import { Toolbar } from './components/Toolbar';
+import { INITIAL_ROWS } from './data';
+import { FILE_TYPES } from './constants';
+
+import { formatDate, formatSize, stringAvatar } from './utils';
+import { ActionDrawer } from './components/ActionDrawer';
+import { RenameDialog } from './components/RenameDialog';
+
+export default function ListViewAdvanced() {
+ // This is used only for the example - renders the drawer inside the container
+ const containerRef = React.useRef(null);
+ const container = () => containerRef.current;
+
+ const isListView = useMediaQuery('(min-width: 700px)');
+
+ const apiRef = useGridApiRef();
+
+ const [rows, setRows] = React.useState(INITIAL_ROWS);
+
+ const [loading, setLoading] = React.useState(false);
+
+ const [overlayState, setOverlayState] = React.useState({
+ overlay: null,
+ params: null,
+ });
+
+ const handleCloseOverlay = () => {
+ setOverlayState({ overlay: null, params: null });
+ };
+
+ const handleDelete = React.useCallback((ids) => {
+ setRows((prevRows) => prevRows.filter((row) => !ids.includes(row.id)));
+ }, []);
+
+ const handleUpdate = React.useCallback((id, field, value) => {
+ setRows((prevRows) =>
+ prevRows.map((row) =>
+ row.id === id
+ ? { ...row, [field]: value, updatedAt: new Date().toISOString() }
+ : row,
+ ),
+ );
+ }, []);
+
+ const handleUpload = React.useCallback((event) => {
+ if (!event.target.files) {
+ return;
+ }
+
+ const file = event.target.files[0];
+ const createdAt = new Date().toISOString();
+
+ const fileType = file.type.split('/')[1];
+
+ // validate file type
+ if (!FILE_TYPES.includes(fileType)) {
+ alert('Invalid file type');
+ return;
+ }
+
+ const row = {
+ id: randomId(),
+ name: file.name,
+ description: '',
+ type: fileType,
+ size: file.size,
+ createdBy: 'Kenan Yusuf',
+ createdAt,
+ updatedAt: createdAt,
+ state: 'pending',
+ };
+
+ event.target.value = '';
+
+ // Add temporary row
+ setLoading(true);
+ setRows((prevRows) => [...prevRows, row]);
+
+ // Simulate server response time
+ const timeout = Math.floor(Math.random() * 3000) + 2000;
+ setTimeout(() => {
+ const uploadedRow = { ...row, state: 'uploaded' };
+ setRows((prevRows) =>
+ prevRows.map((r) => (r.id === row.id ? uploadedRow : r)),
+ );
+ setOverlayState({ overlay: 'actions', params: { row } });
+ setLoading(false);
+ }, timeout);
+ }, []);
+
+ const columns = React.useMemo(
+ () => [
+ {
+ field: 'name',
+ headerName: 'Name',
+ width: 350,
+ editable: true,
+ hideable: false,
+ renderCell: (params) => {
+ return (
+
+
+ );
+ },
+ },
+ {
+ field: 'createdBy',
+ headerName: 'Owner',
+ width: 200,
+ renderCell: (params) => {
+ const avatarProps = stringAvatar(params.value);
+ return (
+
+
+ );
+ },
+ },
+ {
+ field: 'createdAt',
+ headerName: 'Added',
+ type: 'date',
+ width: 200,
+ valueFormatter: formatDate,
+ },
+ {
+ field: 'updatedAt',
+ headerName: 'Modified',
+ type: 'date',
+ width: 200,
+ valueFormatter: formatDate,
+ },
+ {
+ field: 'type',
+ headerName: 'Type',
+ width: 150,
+ },
+ {
+ field: 'size',
+ headerName: 'Size',
+ width: 120,
+ valueFormatter: formatSize,
+ },
+ {
+ type: 'actions',
+ field: 'actions',
+ resizable: false,
+ width: 50,
+ getActions: (params) => [
+ {
+ setOverlayState({ overlay: 'actions', params });
+ }}
+ />
+ ),
+ }),
+ [],
+ );
+
+ const getEstimatedRowHeight = () => {
+ const density = apiRef.current?.state?.density;
+
+ if (isListView) {
+ switch (density) {
+ case 'compact':
+ return 47;
+ case 'standard':
+ return 67;
+ case 'comfortable':
+ return 97;
+ default:
+ return 67;
+ }
+ } else {
+ switch (density) {
+ case 'compact':
+ return 47;
+ case 'standard':
+ return 55;
+ case 'comfortable':
+ return 63;
+ default:
+ return 55;
+ }
+ }
+ };
+
+ const getRowHeight = React.useCallback(
+ () => (isListView ? 'auto' : undefined),
+ [isListView],
+ );
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/ListViewAdvanced.tsx b/docs/data/data-grid/list-view/ListViewAdvanced.tsx
new file mode 100644
index 0000000000000..653911e8d8c3a
--- /dev/null
+++ b/docs/data/data-grid/list-view/ListViewAdvanced.tsx
@@ -0,0 +1,381 @@
+import * as React from 'react';
+import {
+ GridActionsCellItem,
+ GridColDef,
+ useGridApiRef,
+ GridRowParams,
+ DataGridPremium,
+ GridRowId,
+ gridClasses,
+ GridRowModel,
+} from '@mui/x-data-grid-premium';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Avatar from '@mui/material/Avatar';
+import Stack from '@mui/material/Stack';
+import OpenIcon from '@mui/icons-material/Visibility';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import CSSBaseline from '@mui/material/CssBaseline';
+import { randomId } from '@mui/x-data-grid-generator';
+import { FileIcon } from './components/FileIcon';
+import { DetailsDrawer } from './components/DetailsDrawer';
+import { ListCell } from './components/ListCell';
+import { Toolbar } from './components/Toolbar';
+import { INITIAL_ROWS } from './data';
+import { FILE_TYPES } from './constants';
+import { RowModel, FileType } from './types';
+import { formatDate, formatSize, stringAvatar } from './utils';
+import { ActionDrawer } from './components/ActionDrawer';
+import { RenameDialog } from './components/RenameDialog';
+
+export default function ListViewAdvanced() {
+ // This is used only for the example - renders the drawer inside the container
+ const containerRef = React.useRef(null);
+ const container = () => containerRef.current as HTMLElement;
+
+ const isListView = useMediaQuery('(min-width: 700px)');
+
+ const apiRef = useGridApiRef();
+
+ const [rows, setRows] = React.useState[]>(INITIAL_ROWS);
+
+ const [loading, setLoading] = React.useState(false);
+
+ const [overlayState, setOverlayState] = React.useState<{
+ overlay: 'actions' | 'details' | 'rename' | null;
+ params: Pick, 'row'> | null;
+ }>({
+ overlay: null,
+ params: null,
+ });
+
+ const handleCloseOverlay = () => {
+ setOverlayState({ overlay: null, params: null });
+ };
+
+ const handleDelete = React.useCallback((ids: GridRowId[]) => {
+ setRows((prevRows) => prevRows.filter((row) => !ids.includes(row.id)));
+ }, []);
+
+ const handleUpdate = React.useCallback(
+ (
+ id: GridRowId,
+ field: GridRowParams['columns'][number]['field'],
+ value: string,
+ ) => {
+ setRows((prevRows) =>
+ prevRows.map((row) =>
+ row.id === id
+ ? { ...row, [field]: value, updatedAt: new Date().toISOString() }
+ : row,
+ ),
+ );
+ },
+ [],
+ );
+
+ const handleUpload = React.useCallback(
+ (event: React.ChangeEvent) => {
+ if (!event.target.files) {
+ return;
+ }
+
+ const file = event.target.files[0];
+ const createdAt = new Date().toISOString();
+
+ const fileType = file.type.split('/')[1];
+
+ // validate file type
+ if (!FILE_TYPES.includes(fileType as FileType)) {
+ alert('Invalid file type');
+ return;
+ }
+
+ const row: RowModel = {
+ id: randomId(),
+ name: file.name,
+ description: '',
+ type: fileType as FileType,
+ size: file.size,
+ createdBy: 'Kenan Yusuf',
+ createdAt,
+ updatedAt: createdAt,
+ state: 'pending',
+ };
+
+ event.target.value = '';
+
+ // Add temporary row
+ setLoading(true);
+ setRows((prevRows) => [...prevRows, row]);
+
+ // Simulate server response time
+ const timeout = Math.floor(Math.random() * 3000) + 2000;
+ setTimeout(() => {
+ const uploadedRow: RowModel = { ...row, state: 'uploaded' };
+ setRows((prevRows) =>
+ prevRows.map((r) => (r.id === row.id ? uploadedRow : r)),
+ );
+ setOverlayState({ overlay: 'actions', params: { row } });
+ setLoading(false);
+ }, timeout);
+ },
+ [],
+ );
+
+ const columns: GridColDef[] = React.useMemo(
+ () => [
+ {
+ field: 'name',
+ headerName: 'Name',
+ width: 350,
+ editable: true,
+ hideable: false,
+ renderCell: (params) => {
+ return (
+
+
+ );
+ },
+ },
+ {
+ field: 'createdBy',
+ headerName: 'Owner',
+ width: 200,
+ renderCell: (params) => {
+ const avatarProps = stringAvatar(params.value);
+ return (
+
+
+ );
+ },
+ },
+ {
+ field: 'createdAt',
+ headerName: 'Added',
+ type: 'date',
+ width: 200,
+ valueFormatter: formatDate,
+ },
+ {
+ field: 'updatedAt',
+ headerName: 'Modified',
+ type: 'date',
+ width: 200,
+ valueFormatter: formatDate,
+ },
+ {
+ field: 'type',
+ headerName: 'Type',
+ width: 150,
+ },
+ {
+ field: 'size',
+ headerName: 'Size',
+ width: 120,
+ valueFormatter: formatSize,
+ },
+ {
+ type: 'actions',
+ field: 'actions',
+ resizable: false,
+ width: 50,
+ getActions: (params) => [
+ {
+ setOverlayState({ overlay: 'actions', params });
+ }}
+ />
+ ),
+ }),
+ [],
+ );
+
+ const getEstimatedRowHeight = () => {
+ const density = apiRef.current?.state?.density;
+
+ if (isListView) {
+ switch (density) {
+ case 'compact':
+ return 47;
+ case 'standard':
+ return 67;
+ case 'comfortable':
+ return 97;
+ default:
+ return 67;
+ }
+ } else {
+ switch (density) {
+ case 'compact':
+ return 47;
+ case 'standard':
+ return 55;
+ case 'comfortable':
+ return 63;
+ default:
+ return 55;
+ }
+ }
+ };
+
+ const getRowHeight = React.useCallback(
+ () => (isListView ? 'auto' : undefined),
+ [isListView],
+ );
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ActionDrawer.js b/docs/data/data-grid/list-view/components/ActionDrawer.js
new file mode 100644
index 0000000000000..8c4e29e9955d9
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ActionDrawer.js
@@ -0,0 +1,88 @@
+import * as React from 'react';
+
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import OpenIcon from '@mui/icons-material/Visibility';
+import { FileIcon } from './FileIcon';
+import { formatDate, formatSize } from '../utils';
+import { Drawer, DrawerHeader } from './Drawer';
+
+function DrawerContent(props) {
+ const { params, onDelete, onPreview, onRename } = props;
+ return (
+
+
+
+ {params.row.name}
+
+
+ {params.row.createdBy}
+
+
+ ·
+
+
+ {formatSize(params.row.size)}
+
+
+
+ {params.row.updatedAt
+ ? `Updated ${formatDate(params.row.updatedAt)}`
+ : `Added ${formatDate(params.row.createdAt)}`}
+
+
+
+
+
+ );
+}
+
+export function ActionDrawer(props) {
+ const { params, onPreview, onRename, onDelete, ...other } = props;
+ return (
+
+ {params && (
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ActionDrawer.tsx b/docs/data/data-grid/list-view/components/ActionDrawer.tsx
new file mode 100644
index 0000000000000..533c8cddad5fb
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ActionDrawer.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { GridRowId, GridRowParams } from '@mui/x-data-grid-premium';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import OpenIcon from '@mui/icons-material/Visibility';
+import { FileIcon } from './FileIcon';
+import { formatDate, formatSize } from '../utils';
+import { Drawer, DrawerHeader, DrawerProps } from './Drawer';
+import { RowModel } from '../types';
+
+interface ActionDrawerProps extends DrawerProps {
+ params: Pick, 'row'> | null;
+ onPreview: () => void;
+ onRename: () => void;
+ onDelete: (id: GridRowId) => void;
+}
+
+function DrawerContent(
+ props: { params: Pick, 'row'> } & Pick<
+ ActionDrawerProps,
+ 'onDelete' | 'onPreview' | 'onRename'
+ >,
+) {
+ const { params, onDelete, onPreview, onRename } = props;
+ return (
+
+
+
+ {params.row.name}
+
+
+ {params.row.createdBy}
+
+
+ ·
+
+
+ {formatSize(params.row.size)}
+
+
+
+ {params.row.updatedAt
+ ? `Updated ${formatDate(params.row.updatedAt)}`
+ : `Added ${formatDate(params.row.createdAt)}`}
+
+
+
+
+
+ );
+}
+
+export function ActionDrawer(props: ActionDrawerProps) {
+ const { params, onPreview, onRename, onDelete, ...other } = props;
+ return (
+
+ {params && (
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/Card.js b/docs/data/data-grid/list-view/components/Card.js
new file mode 100644
index 0000000000000..5d2e880bf605b
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/Card.js
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+export function Card(props) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
+
+export function CardMedia(props) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
+
+export function CardContent(props) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
+
+export function CardTitle(props) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
+
+export function CardDetailList(props) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
+
+export function CardDetail(props) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/Card.tsx b/docs/data/data-grid/list-view/components/Card.tsx
new file mode 100644
index 0000000000000..bd0df76f5db15
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/Card.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import Stack, { StackProps } from '@mui/material/Stack';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+
+export function Card(props: StackProps) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
+
+export function CardMedia(props: StackProps) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
+
+export function CardContent(props: StackProps) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
+
+export function CardTitle(props: TypographyProps) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
+
+export function CardDetailList(props: StackProps) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
+
+export function CardDetail(props: TypographyProps) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/DetailsDrawer.js b/docs/data/data-grid/list-view/components/DetailsDrawer.js
new file mode 100644
index 0000000000000..44b1808c622b7
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/DetailsDrawer.js
@@ -0,0 +1,142 @@
+import * as React from 'react';
+
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import { Drawer, DrawerHeader } from './Drawer';
+import { FileIcon } from './FileIcon';
+import { formatDate, formatSize, stringAvatar } from '../utils';
+
+function Thumbnail() {
+ return (
+ ({
+ aspectRatio: '16/9',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ color: 'text.secondary',
+ borderRadius: 2,
+ gap: 1,
+ backgroundColor: 'grey.200',
+ ...theme.applyStyles('dark', {
+ backgroundColor: 'grey.800',
+ }),
+ })}
+ >
+
+ No preview available
+
+
+ );
+}
+
+function DrawerContent(props) {
+ const { params, onDescriptionChange, onClose } = props;
+ const [description, setDescription] = React.useState(params.row.description || '');
+ const avatarProps = stringAvatar(params.row.createdBy);
+
+ const handleSave = (event) => {
+ onDescriptionChange(params.row.id, description);
+ onClose(event);
+ };
+
+ return (
+
+
+ {params.row.name}
+
+
+
+
+ setDescription(event.target.value)}
+ sx={{ mt: 1 }}
+ multiline
+ />
+
+
+ Type
+
+ {params.row.type}
+
+
+
+
+ Size
+
+ {formatSize(params.row.size)}
+
+
+
+
+ Created
+
+ {formatDate(params.row.createdAt)}
+
+
+
+
+ Modified
+
+ {formatDate(params.row.updatedAt)}
+
+
+
+ Owner
+
+
+
+ {params.row.createdBy}
+
+
+
+ );
+}
+
+export function DetailsDrawer(props) {
+ const { params, listView, onDescriptionChange, onClose, ...other } = props;
+ return (
+
+ {params && (
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/DetailsDrawer.tsx b/docs/data/data-grid/list-view/components/DetailsDrawer.tsx
new file mode 100644
index 0000000000000..6e4f2545dfeb1
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/DetailsDrawer.tsx
@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { GridRowId, GridRowParams } from '@mui/x-data-grid-premium';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import { Drawer, DrawerHeader, DrawerProps } from './Drawer';
+import { FileIcon } from './FileIcon';
+import { formatDate, formatSize, stringAvatar } from '../utils';
+import { RowModel } from '../types';
+
+interface DetailsDrawerProps extends DrawerProps {
+ params: Pick, 'row'> | null;
+ listView: boolean;
+ onDescriptionChange: (id: GridRowId, value: string) => void;
+}
+
+function Thumbnail() {
+ return (
+ ({
+ aspectRatio: '16/9',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ color: 'text.secondary',
+ borderRadius: 2,
+ gap: 1,
+ backgroundColor: 'grey.200',
+ ...theme.applyStyles('dark', {
+ backgroundColor: 'grey.800',
+ }),
+ })}
+ >
+
+ No preview available
+
+
+ );
+}
+
+function DrawerContent(
+ props: { params: Pick, 'row'> } & Pick<
+ DetailsDrawerProps,
+ 'onDescriptionChange' | 'onClose'
+ >,
+) {
+ const { params, onDescriptionChange, onClose } = props;
+ const [description, setDescription] = React.useState(params.row.description || '');
+ const avatarProps = stringAvatar(params.row.createdBy);
+
+ const handleSave = (event: React.MouseEvent) => {
+ onDescriptionChange(params.row.id, description);
+ onClose(event);
+ };
+
+ return (
+
+
+ {params.row.name}
+
+
+
+
+ setDescription(event.target.value)}
+ sx={{ mt: 1 }}
+ multiline
+ />
+
+
+
+ Type
+
+ {params.row.type}
+
+
+
+
+ Size
+
+ {formatSize(params.row.size)}
+
+
+
+
+ Created
+
+ {formatDate(params.row.createdAt)}
+
+
+
+
+ Modified
+
+ {formatDate(params.row.updatedAt)}
+
+
+
+ Owner
+
+
+
+ {params.row.createdBy}
+
+
+
+ );
+}
+
+export function DetailsDrawer(props: DetailsDrawerProps) {
+ const { params, listView, onDescriptionChange, onClose, ...other } = props;
+ return (
+
+ {params && (
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/Drawer.js b/docs/data/data-grid/list-view/components/Drawer.js
new file mode 100644
index 0000000000000..fcf9d182a6a30
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/Drawer.js
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import MUISwipeableDrawer from '@mui/material/SwipeableDrawer';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Paper from '@mui/material/Paper';
+import { useMediaQuery } from '@mui/system';
+
+function SwipeIndicator() {
+ return (
+
+
+ );
+}
+
+export function DrawerHeader(props) {
+ const { children, ...other } = props;
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export function Drawer(props) {
+ const { children, anchor, width = 320, container, ...other } = props;
+ const isBottomDrawer = anchor === 'bottom';
+ const isTouch = useMediaQuery('(hover: none)');
+
+ return (
+ {}} // required by SwipeableDrawer but not used in this demo
+ >
+ {isTouch && isBottomDrawer &&
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/Drawer.tsx b/docs/data/data-grid/list-view/components/Drawer.tsx
new file mode 100644
index 0000000000000..a859781e4417d
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/Drawer.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import MUISwipeableDrawer, {
+ SwipeableDrawerProps as MUISwipeableDrawerProps,
+} from '@mui/material/SwipeableDrawer';
+import Box from '@mui/material/Box';
+import Stack, { StackProps } from '@mui/material/Stack';
+import Paper from '@mui/material/Paper';
+import { useMediaQuery } from '@mui/system';
+
+function SwipeIndicator() {
+ return (
+
+
+ );
+}
+
+export interface DrawerHeaderProps extends StackProps {}
+
+export function DrawerHeader(props: DrawerHeaderProps) {
+ const { children, ...other } = props;
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export interface DrawerProps extends Omit {
+ width?: number;
+ container?: () => HTMLElement;
+}
+
+export function Drawer(props: DrawerProps) {
+ const { children, anchor, width = 320, container, ...other } = props;
+ const isBottomDrawer = anchor === 'bottom';
+ const isTouch = useMediaQuery('(hover: none)');
+
+ return (
+ {}} // required by SwipeableDrawer but not used in this demo
+ >
+ {isTouch && isBottomDrawer &&
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/FileIcon.js b/docs/data/data-grid/list-view/components/FileIcon.js
new file mode 100644
index 0000000000000..bc1818bb50f4e
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/FileIcon.js
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+import TextSnippetIcon from '@mui/icons-material/TextSnippet';
+import VideocamIcon from '@mui/icons-material/Videocam';
+import ImageIcon from '@mui/icons-material/Image';
+import FolderZipIcon from '@mui/icons-material/FolderZip';
+
+const FILE_TYPE_ICONS = {
+ video: {
+ component: VideocamIcon,
+ color: 'error',
+ },
+ image: {
+ component: ImageIcon,
+ color: 'error',
+ },
+ document: {
+ component: TextSnippetIcon,
+ color: 'primary',
+ },
+ archive: {
+ component: FolderZipIcon,
+ color: 'inherit',
+ },
+};
+
+const FILE_ICON = {
+ pdf: FILE_TYPE_ICONS.document,
+ docx: FILE_TYPE_ICONS.document,
+ txt: FILE_TYPE_ICONS.document,
+ mp4: FILE_TYPE_ICONS.video,
+ mov: FILE_TYPE_ICONS.video,
+ webm: FILE_TYPE_ICONS.video,
+ jpg: FILE_TYPE_ICONS.image,
+ jpeg: FILE_TYPE_ICONS.image,
+ png: FILE_TYPE_ICONS.image,
+ gif: FILE_TYPE_ICONS.image,
+ tiff: FILE_TYPE_ICONS.image,
+ webp: FILE_TYPE_ICONS.image,
+ zip: FILE_TYPE_ICONS.archive,
+};
+
+export function FileIcon(props) {
+ const { type } = props;
+ const iconProps = FILE_ICON[type];
+ return ({
+ position: 'relative',
+ borderRadius: 1,
+ width: 64,
+ height: 64,
+ overflow: 'hidden',
+ backgroundColor: 'grey.200',
+ ...theme.applyStyles('dark', {
+ backgroundColor: 'grey.800',
+ }),
+ })}
+ >
+
+ {fileIcon}
+
+
+ );
+}
+
+export function ListCell(props) {
+ const { onOpenActions, ...params } = props;
+ const apiRef = useGridApiContext();
+ const density = useGridSelector(apiRef, gridDensitySelector);
+ const columnVisibilityModel = useGridSelector(
+ apiRef,
+ gridColumnVisibilityModelSelector,
+ );
+
+ const showCreatedBy = columnVisibilityModel.createdBy !== false;
+ const showSize = columnVisibilityModel.size !== false;
+ const showCreatedAt = columnVisibilityModel.createdAt !== false;
+ const showUpdatedAt = columnVisibilityModel.updatedAt !== false;
+ const showThumbnail = density === 'comfortable';
+
+ const icon = (
+
+ {showThumbnail ?
+
+ {params.row.name}
+ {density !== 'compact' && (showCreatedBy || showSize) && (
+
+ {showCreatedBy && {params.row.createdBy} }
+ {showSize && {formatSize(params.row.size)} }
+
+ )}
+ {density === 'comfortable' && (showCreatedAt || showUpdatedAt) && (
+
+ {showUpdatedAt && `Updated ${formatDate(params.row.updatedAt)}`}
+
+ )}
+
+
+ {
+ event.stopPropagation();
+ onOpenActions();
+ }}
+ sx={{ mr: -0.75 }}
+ >
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ListCell.tsx b/docs/data/data-grid/list-view/components/ListCell.tsx
new file mode 100644
index 0000000000000..250d5b82c2178
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ListCell.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import {
+ gridColumnVisibilityModelSelector,
+ GridDensity,
+ gridDensitySelector,
+ GridRenderCellParams,
+ useGridApiContext,
+ useGridSelector,
+} from '@mui/x-data-grid-premium';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import GridMoreVertIcon from '@mui/icons-material/MoreVert';
+import {
+ Card,
+ CardContent,
+ CardDetailList,
+ CardDetail,
+ CardTitle,
+ CardMedia,
+} from './Card';
+import { FileIcon } from './FileIcon';
+import { formatDate, formatSize } from '../utils';
+import { RowModel } from '../types';
+
+interface ListCellProps extends GridRenderCellParams {
+ onOpenActions: () => void;
+}
+
+const ICON_SIZE_BY_DENSITY: Record = {
+ compact: 24,
+ standard: 32,
+ comfortable: 16,
+};
+
+function Thumbnail(props: { fileIcon: React.ReactNode }) {
+ const { fileIcon } = props;
+ return (
+ ({
+ position: 'relative',
+ borderRadius: 1,
+ width: 64,
+ height: 64,
+ overflow: 'hidden',
+ backgroundColor: 'grey.200',
+ ...theme.applyStyles('dark', {
+ backgroundColor: 'grey.800',
+ }),
+ })}
+ >
+
+ {fileIcon}
+
+
+ );
+}
+
+export function ListCell(props: ListCellProps) {
+ const { onOpenActions, ...params } = props;
+ const apiRef = useGridApiContext();
+ const density = useGridSelector(apiRef, gridDensitySelector);
+ const columnVisibilityModel = useGridSelector(
+ apiRef,
+ gridColumnVisibilityModelSelector,
+ );
+
+ const showCreatedBy = columnVisibilityModel.createdBy !== false;
+ const showSize = columnVisibilityModel.size !== false;
+ const showCreatedAt = columnVisibilityModel.createdAt !== false;
+ const showUpdatedAt = columnVisibilityModel.updatedAt !== false;
+ const showThumbnail = density === 'comfortable';
+
+ const icon = (
+
+ {showThumbnail ?
+
+ {params.row.name}
+ {density !== 'compact' && (showCreatedBy || showSize) && (
+
+ {showCreatedBy && {params.row.createdBy} }
+ {showSize && {formatSize(params.row.size)} }
+
+ )}
+ {density === 'comfortable' && (showCreatedAt || showUpdatedAt) && (
+
+ {showUpdatedAt && `Updated ${formatDate(params.row.updatedAt)}`}
+
+ )}
+
+
+ {
+ event.stopPropagation();
+ onOpenActions();
+ }}
+ sx={{ mr: -0.75 }}
+ >
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/RenameDialog.js b/docs/data/data-grid/list-view/components/RenameDialog.js
new file mode 100644
index 0000000000000..b7d1a49972c47
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/RenameDialog.js
@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+
+export function RenameDialog(props) {
+ const { params, open, container, onSave, onClose } = props;
+
+ const handleSave = (event) => {
+ event.preventDefault();
+
+ const formData = new FormData(event.currentTarget);
+ const value = formData.get('name');
+
+ onSave(params.row.id, value);
+
+ onClose();
+ };
+
+ return (
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/RenameDialog.tsx b/docs/data/data-grid/list-view/components/RenameDialog.tsx
new file mode 100644
index 0000000000000..670e77c81ecd3
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/RenameDialog.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { GridRowId, GridRowParams } from '@mui/x-data-grid-premium';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import { RowModel } from '../types';
+
+export interface RenameDialogProps {
+ params: Pick, 'row'> | null;
+ open: boolean;
+ container?: () => HTMLElement;
+ onSave: (id: GridRowId, value: string) => void;
+ onClose: () => void;
+}
+
+export function RenameDialog(props: RenameDialogProps) {
+ const { params, open, container, onSave, onClose } = props;
+
+ const handleSave = (event: React.FormEvent) => {
+ event.preventDefault();
+
+ const formData = new FormData(event.currentTarget);
+ const value = formData.get('name') as string;
+
+ onSave(params!.row.id, value);
+
+ onClose();
+ };
+
+ return (
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/Toolbar.js b/docs/data/data-grid/list-view/components/Toolbar.js
new file mode 100644
index 0000000000000..412b5dc9f3c54
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/Toolbar.js
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import {
+ GridClearIcon,
+ GridDeleteIcon,
+ GridToolbarContainer,
+ GridToolbarQuickFilter,
+ selectedGridRowsSelector,
+ useGridApiContext,
+ useGridSelector,
+} from '@mui/x-data-grid-premium';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { iconButtonClasses } from '@mui/material/IconButton';
+import { ToolbarAddItem } from './ToolbarAddItem';
+import { ToolbarColumnsItem } from './ToolbarColumnsItem';
+import { ToolbarSortItem } from './ToolbarSortItem';
+import { ToolbarDensityItem } from './ToolbarDensityItem';
+import { ToolbarFilterItem } from './ToolbarFilterItem';
+import { ToolbarButton } from './ToolbarButton';
+
+export function Toolbar(props) {
+ const { listView = false, container, handleUpload, handleDelete } = props;
+ const apiRef = useGridApiContext();
+ const selectedRows = useGridSelector(apiRef, selectedGridRowsSelector);
+ const selectionCount = selectedRows.size;
+ const showSelectionOptions = selectionCount > 0;
+
+ const handleClearSelection = () => {
+ apiRef.current.setRowSelectionModel([]);
+ };
+
+ const handleDeleteSelectedRows = () => {
+ handleClearSelection();
+ handleDelete?.(Array.from(selectedRows.keys()));
+ };
+
+ const itemProps = {
+ listView,
+ container,
+ };
+
+ return (
+
+ {showSelectionOptions ? (
+
+
+
+
+ {selectionCount} selected
+
+
+
+
+ ) : (
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/Toolbar.tsx b/docs/data/data-grid/list-view/components/Toolbar.tsx
new file mode 100644
index 0000000000000..62980799d4b29
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/Toolbar.tsx
@@ -0,0 +1,115 @@
+import * as React from 'react';
+import {
+ GridClearIcon,
+ GridDeleteIcon,
+ GridRowId,
+ GridToolbarContainer,
+ GridToolbarProps,
+ GridToolbarQuickFilter,
+ selectedGridRowsSelector,
+ useGridApiContext,
+ useGridSelector,
+} from '@mui/x-data-grid-premium';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { iconButtonClasses } from '@mui/material/IconButton';
+import { ToolbarAddItem } from './ToolbarAddItem';
+import { ToolbarColumnsItem } from './ToolbarColumnsItem';
+import { ToolbarSortItem } from './ToolbarSortItem';
+import { ToolbarDensityItem } from './ToolbarDensityItem';
+import { ToolbarFilterItem } from './ToolbarFilterItem';
+import { ToolbarButton } from './ToolbarButton';
+import { DrawerProps } from './Drawer';
+
+export interface ToolbarProps extends GridToolbarProps {
+ container?: DrawerProps['container'];
+ listView?: boolean;
+ handleDelete?: (ids: GridRowId[]) => void;
+ handleUpload?: (event: React.ChangeEvent) => void;
+}
+
+export function Toolbar(props: ToolbarProps) {
+ const { listView = false, container, handleUpload, handleDelete } = props;
+ const apiRef = useGridApiContext();
+ const selectedRows = useGridSelector(apiRef, selectedGridRowsSelector);
+ const selectionCount = selectedRows.size;
+ const showSelectionOptions = selectionCount > 0;
+
+ const handleClearSelection = () => {
+ apiRef.current.setRowSelectionModel([]);
+ };
+
+ const handleDeleteSelectedRows = () => {
+ handleClearSelection();
+ handleDelete?.(Array.from(selectedRows.keys()));
+ };
+
+ const itemProps = {
+ listView,
+ container,
+ };
+
+ return (
+
+ {showSelectionOptions ? (
+
+
+
+
+ {selectionCount} selected
+
+
+
+
+ ) : (
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarAddItem.js b/docs/data/data-grid/list-view/components/ToolbarAddItem.js
new file mode 100644
index 0000000000000..48053f1bb08fc
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarAddItem.js
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import AddIcon from '@mui/icons-material/Add';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import NewFolderIcon from '@mui/icons-material/CreateNewFolder';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+
+import { ToolbarButton } from './ToolbarButton';
+import { Drawer, DrawerHeader } from './Drawer';
+
+const ListItemUploadButton = React.forwardRef(
+ function ListItemUploadButton(props, ref) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+ },
+);
+
+export function ToolbarAddItem(props) {
+ const { container } = props;
+ const [open, setOpen] = React.useState(false);
+ const { handleUpload, listView } = props;
+
+ const handleFileSelect = (event) => {
+ handleUpload?.(event);
+ setOpen(false);
+ };
+
+ return (
+
+ setOpen(true)}>
+
+
+ setOpen(false)}
+ >
+
+ Add new
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarAddItem.tsx b/docs/data/data-grid/list-view/components/ToolbarAddItem.tsx
new file mode 100644
index 0000000000000..a3c43ffda857d
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarAddItem.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import AddIcon from '@mui/icons-material/Add';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import NewFolderIcon from '@mui/icons-material/CreateNewFolder';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import { ButtonProps } from '@mui/material/Button';
+import { ToolbarButton } from './ToolbarButton';
+import { Drawer, DrawerHeader, DrawerProps } from './Drawer';
+
+const ListItemUploadButton = React.forwardRef(
+ function ListItemUploadButton(props, ref) {
+ const { children, ...other } = props;
+ return (
+
+ {children}
+
+ );
+ },
+);
+
+export interface ToolbarAddItemProps {
+ container: DrawerProps['container'];
+ listView: boolean;
+ handleUpload?: (event: React.ChangeEvent) => void;
+}
+
+export function ToolbarAddItem(props: ToolbarAddItemProps) {
+ const { container } = props;
+ const [open, setOpen] = React.useState(false);
+ const { handleUpload, listView } = props;
+
+ const handleFileSelect = (event: React.ChangeEvent) => {
+ handleUpload?.(event);
+ setOpen(false);
+ };
+
+ return (
+
+ setOpen(true)}>
+
+
+ setOpen(false)}
+ >
+
+ Add new
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarButton.js b/docs/data/data-grid/list-view/components/ToolbarButton.js
new file mode 100644
index 0000000000000..7ed7b6f21a51a
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarButton.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import IconButton from '@mui/material/IconButton';
+
+export function ToolbarButton(props) {
+ const { className, children, ...other } = props;
+ return {children} ;
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarButton.tsx b/docs/data/data-grid/list-view/components/ToolbarButton.tsx
new file mode 100644
index 0000000000000..48b5dcf1ed302
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarButton.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import IconButton from '@mui/material/IconButton';
+import { ButtonProps } from '@mui/material/Button';
+
+export function ToolbarButton(props: ButtonProps) {
+ const { className, children, ...other } = props;
+ return {children} ;
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarColumnsItem.js b/docs/data/data-grid/list-view/components/ToolbarColumnsItem.js
new file mode 100644
index 0000000000000..e6fe57471fd59
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarColumnsItem.js
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import {
+ GridColumnIcon,
+ useGridApiContext,
+ useGridSelector,
+ gridColumnDefinitionsSelector,
+ gridColumnVisibilityModelSelector,
+} from '@mui/x-data-grid-premium';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CheckBoxBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { ToolbarButton } from './ToolbarButton';
+import { Drawer, DrawerHeader } from './Drawer';
+
+export function ToolbarColumnsItem(props) {
+ const { listView, container } = props;
+ const [open, setOpen] = React.useState(false);
+ const apiRef = useGridApiContext();
+ const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+ const columnVisibilityModel = useGridSelector(
+ apiRef,
+ gridColumnVisibilityModelSelector,
+ );
+
+ const toggleFieldVisibility = (field) => {
+ apiRef.current.setColumnVisibility(
+ field,
+ columnVisibilityModel[field] === false,
+ );
+ };
+
+ return (
+
+ setOpen(true)}>
+
+
+ setOpen(false)}
+ >
+
+ Fields
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarColumnsItem.tsx b/docs/data/data-grid/list-view/components/ToolbarColumnsItem.tsx
new file mode 100644
index 0000000000000..f4f55499d06ed
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarColumnsItem.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import {
+ GridColumnIcon,
+ useGridApiContext,
+ useGridSelector,
+ gridColumnDefinitionsSelector,
+ gridColumnVisibilityModelSelector,
+} from '@mui/x-data-grid-premium';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CheckBoxBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { ToolbarButton } from './ToolbarButton';
+import { Drawer, DrawerHeader, DrawerProps } from './Drawer';
+
+interface ToolbarColumnsItemProps {
+ listView: boolean;
+ container: DrawerProps['container'];
+}
+
+export function ToolbarColumnsItem(props: ToolbarColumnsItemProps) {
+ const { listView, container } = props;
+ const [open, setOpen] = React.useState(false);
+ const apiRef = useGridApiContext();
+ const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+ const columnVisibilityModel = useGridSelector(
+ apiRef,
+ gridColumnVisibilityModelSelector,
+ );
+
+ const toggleFieldVisibility = (field: string) => {
+ apiRef.current.setColumnVisibility(
+ field,
+ columnVisibilityModel[field] === false,
+ );
+ };
+
+ return (
+
+ setOpen(true)}>
+
+
+ setOpen(false)}
+ >
+
+ Fields
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarDensityItem.js b/docs/data/data-grid/list-view/components/ToolbarDensityItem.js
new file mode 100644
index 0000000000000..afb8447721ee0
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarDensityItem.js
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import {
+ GridViewStreamIcon,
+ useGridApiContext,
+ useGridSelector,
+ gridDensitySelector,
+ GridCheckIcon,
+ GridViewHeadlineIcon,
+ GridTableRowsIcon,
+} from '@mui/x-data-grid-premium';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Typography from '@mui/material/Typography';
+import { Drawer, DrawerHeader } from './Drawer';
+import { ToolbarButton } from './ToolbarButton';
+
+const DENSITY_ICONS = {
+ compact: GridViewHeadlineIcon,
+ standard: GridTableRowsIcon,
+ comfortable: GridViewStreamIcon,
+};
+
+const DENSITY_OPTIONS = [
+ {
+ label: 'Compact',
+ value: 'compact',
+ },
+ {
+ label: 'Standard',
+ value: 'standard',
+ },
+ {
+ label: 'Comfortable',
+ value: 'comfortable',
+ },
+];
+
+export function ToolbarDensityItem(props) {
+ const { listView, container } = props;
+ const [open, setOpen] = React.useState(false);
+ const apiRef = useGridApiContext();
+ const density = useGridSelector(apiRef, gridDensitySelector);
+
+ const handleDensityChange = (value) => {
+ apiRef.current.setDensity(value);
+ setOpen(false);
+ };
+
+ const Icon = DENSITY_ICONS[density];
+
+ return (
+
+ setOpen(true)}>
+
+
+ setOpen(false)}
+ >
+
+ Density
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarDensityItem.tsx b/docs/data/data-grid/list-view/components/ToolbarDensityItem.tsx
new file mode 100644
index 0000000000000..8f9ce7a1846ed
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarDensityItem.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import {
+ GridViewStreamIcon,
+ useGridApiContext,
+ useGridSelector,
+ GridDensityOption,
+ gridDensitySelector,
+ GridCheckIcon,
+ GridDensity,
+ GridViewHeadlineIcon,
+ GridTableRowsIcon,
+} from '@mui/x-data-grid-premium';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Typography from '@mui/material/Typography';
+import { Drawer, DrawerHeader, DrawerProps } from './Drawer';
+import { ToolbarButton } from './ToolbarButton';
+
+const DENSITY_ICONS = {
+ compact: GridViewHeadlineIcon,
+ standard: GridTableRowsIcon,
+ comfortable: GridViewStreamIcon,
+};
+
+const DENSITY_OPTIONS: Omit[] = [
+ {
+ label: 'Compact',
+ value: 'compact',
+ },
+ {
+ label: 'Standard',
+ value: 'standard',
+ },
+ {
+ label: 'Comfortable',
+ value: 'comfortable',
+ },
+];
+
+interface ToolbarDensityItemProps {
+ listView: boolean;
+ container: DrawerProps['container'];
+}
+
+export function ToolbarDensityItem(props: ToolbarDensityItemProps) {
+ const { listView, container } = props;
+ const [open, setOpen] = React.useState(false);
+ const apiRef = useGridApiContext();
+ const density = useGridSelector(apiRef, gridDensitySelector);
+
+ const handleDensityChange = (value: GridDensity) => {
+ apiRef.current.setDensity(value);
+ setOpen(false);
+ };
+
+ const Icon = DENSITY_ICONS[density];
+
+ return (
+
+ setOpen(true)}>
+
+
+ setOpen(false)}
+ >
+
+ Density
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarFilterItem.js b/docs/data/data-grid/list-view/components/ToolbarFilterItem.js
new file mode 100644
index 0000000000000..06cdb3c4690ef
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarFilterItem.js
@@ -0,0 +1,217 @@
+import * as React from 'react';
+import {
+ GridFilterListIcon,
+ useGridApiContext,
+ useGridSelector,
+ gridFilterActiveItemsSelector,
+ GridCheckIcon,
+} from '@mui/x-data-grid-premium';
+import Badge from '@mui/material/Badge';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CheckBoxBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import FilterAltOffIcon from '@mui/icons-material/FilterAltOff';
+import { Drawer, DrawerHeader } from './Drawer';
+import { ToolbarButton } from './ToolbarButton';
+
+import { FILE_TYPES } from '../constants';
+
+const DATE_MODIFIED_FILTERS = [
+ {
+ label: 'All',
+ id: 'all',
+ },
+ {
+ label: 'Today',
+ id: 'today',
+ operator: 'onOrAfter',
+ value: new Date(new Date().setHours(0, 0, 0, 0)).toISOString(),
+ },
+ {
+ label: 'Last week',
+ id: 'last-week',
+ operator: 'onOrAfter',
+ value: new Date(
+ new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0),
+ ).toISOString(),
+ },
+ {
+ label: 'Last month',
+ id: 'last-month',
+ operator: 'onOrAfter',
+ value: new Date(
+ new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0),
+ ).toISOString(),
+ },
+ {
+ label: 'Last 3 months',
+ id: 'last-3-months',
+ operator: 'onOrAfter',
+ value: new Date(
+ new Date(Date.now() - 3 * 30 * 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0),
+ ).toISOString(),
+ },
+];
+
+export function ToolbarFilterItem(props) {
+ const { listView, container } = props;
+ const [open, setOpen] = React.useState(false);
+ const apiRef = useGridApiContext();
+ const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
+ const currentFileTypeFilter =
+ activeFilters.filter((filter) => filter.field === 'type')?.[0]?.value ?? [];
+ const currentDateModifiedFilter = activeFilters.find(
+ (filter) => filter.field === 'updatedAt',
+ );
+
+ const applyDateModifiedFilter = (filterItem) => {
+ if (currentDateModifiedFilter) {
+ apiRef.current.deleteFilterItem(currentDateModifiedFilter);
+ }
+
+ apiRef.current.upsertFilterItem({
+ field: 'updatedAt',
+ ...filterItem,
+ });
+ };
+
+ const resetDateModifiedFilter = () => {
+ if (currentDateModifiedFilter) {
+ apiRef.current.deleteFilterItem(currentDateModifiedFilter);
+ }
+ };
+
+ const applyFileTypeFilter = (fileType, enable) => {
+ apiRef.current.upsertFilterItem({
+ id: 'file-type',
+ field: 'type',
+ operator: 'isAnyOf',
+ value: enable
+ ? [...currentFileTypeFilter, fileType]
+ : currentFileTypeFilter.filter((type) => type !== fileType),
+ });
+ };
+
+ const clearFilters = () => {
+ apiRef.current.setFilterModel({
+ items: [],
+ });
+ };
+
+ return (
+
+ setOpen(true)}>
+
+
+
+
+ setOpen(false)}
+ >
+
+ Filters
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarFilterItem.tsx b/docs/data/data-grid/list-view/components/ToolbarFilterItem.tsx
new file mode 100644
index 0000000000000..2bb3040df9cd8
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarFilterItem.tsx
@@ -0,0 +1,225 @@
+import * as React from 'react';
+import {
+ GridFilterListIcon,
+ useGridApiContext,
+ useGridSelector,
+ gridFilterActiveItemsSelector,
+ GridCheckIcon,
+ GridFilterItem,
+} from '@mui/x-data-grid-premium';
+import Badge from '@mui/material/Badge';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CheckBoxBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import FilterAltOffIcon from '@mui/icons-material/FilterAltOff';
+import { Drawer, DrawerHeader, DrawerProps } from './Drawer';
+import { ToolbarButton } from './ToolbarButton';
+import { FileType } from '../types';
+import { FILE_TYPES } from '../constants';
+
+const DATE_MODIFIED_FILTERS = [
+ {
+ label: 'All',
+ id: 'all',
+ },
+ {
+ label: 'Today',
+ id: 'today',
+ operator: 'onOrAfter',
+ value: new Date(new Date().setHours(0, 0, 0, 0)).toISOString(),
+ },
+ {
+ label: 'Last week',
+ id: 'last-week',
+ operator: 'onOrAfter',
+ value: new Date(
+ new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0),
+ ).toISOString(),
+ },
+ {
+ label: 'Last month',
+ id: 'last-month',
+ operator: 'onOrAfter',
+ value: new Date(
+ new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0),
+ ).toISOString(),
+ },
+ {
+ label: 'Last 3 months',
+ id: 'last-3-months',
+ operator: 'onOrAfter',
+ value: new Date(
+ new Date(Date.now() - 3 * 30 * 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0),
+ ).toISOString(),
+ },
+];
+
+interface ToolbarFilterItemProps {
+ listView: boolean;
+ container: DrawerProps['container'];
+}
+
+export function ToolbarFilterItem(props: ToolbarFilterItemProps) {
+ const { listView, container } = props;
+ const [open, setOpen] = React.useState(false);
+ const apiRef = useGridApiContext();
+ const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
+ const currentFileTypeFilter =
+ activeFilters.filter((filter) => filter.field === 'type')?.[0]?.value ?? [];
+ const currentDateModifiedFilter = activeFilters.find(
+ (filter) => filter.field === 'updatedAt',
+ );
+
+ const applyDateModifiedFilter = (filterItem: Omit) => {
+ if (currentDateModifiedFilter) {
+ apiRef.current.deleteFilterItem(currentDateModifiedFilter);
+ }
+
+ apiRef.current.upsertFilterItem({
+ field: 'updatedAt',
+ ...filterItem,
+ });
+ };
+
+ const resetDateModifiedFilter = () => {
+ if (currentDateModifiedFilter) {
+ apiRef.current.deleteFilterItem(currentDateModifiedFilter);
+ }
+ };
+
+ const applyFileTypeFilter = (fileType: FileType, enable: boolean) => {
+ apiRef.current.upsertFilterItem({
+ id: 'file-type',
+ field: 'type',
+ operator: 'isAnyOf',
+ value: enable
+ ? [...currentFileTypeFilter, fileType]
+ : currentFileTypeFilter.filter((type: string) => type !== fileType),
+ });
+ };
+
+ const clearFilters = () => {
+ apiRef.current.setFilterModel({
+ items: [],
+ });
+ };
+
+ return (
+
+ setOpen(true)}>
+
+
+
+
+ setOpen(false)}
+ >
+
+ Filters
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarSortItem.js b/docs/data/data-grid/list-view/components/ToolbarSortItem.js
new file mode 100644
index 0000000000000..91c07622847f2
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarSortItem.js
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import {
+ useGridApiContext,
+ GridArrowUpwardIcon,
+ GridArrowDownwardIcon,
+ useGridSelector,
+ gridSortModelSelector,
+ gridColumnDefinitionsSelector,
+} from '@mui/x-data-grid-premium';
+import SwapVertIcon from '@mui/icons-material/SwapVert';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Typography from '@mui/material/Typography';
+import Badge from '@mui/material/Badge';
+import { Drawer, DrawerHeader } from './Drawer';
+import { ToolbarButton } from './ToolbarButton';
+
+export function ToolbarSortItem(props) {
+ const { listView, container } = props;
+ const [open, setOpen] = React.useState(false);
+ const apiRef = useGridApiContext();
+ const fields = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+ const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+ const sortableFields = fields.filter((field) => field.sortable);
+ const sortCount = sortModel.length;
+
+ const handleSortChange = (field, sort) => {
+ apiRef.current.sortColumn(field, sort, true);
+ };
+
+ return (
+
+ setOpen(true)}>
+
+
+
+
+ setOpen(false)}
+ >
+
+ Sort by
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/components/ToolbarSortItem.tsx b/docs/data/data-grid/list-view/components/ToolbarSortItem.tsx
new file mode 100644
index 0000000000000..4c3633f6ec3d6
--- /dev/null
+++ b/docs/data/data-grid/list-view/components/ToolbarSortItem.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+import {
+ useGridApiContext,
+ GridArrowUpwardIcon,
+ GridArrowDownwardIcon,
+ useGridSelector,
+ gridSortModelSelector,
+ gridColumnDefinitionsSelector,
+ GridSortDirection,
+} from '@mui/x-data-grid-premium';
+import SwapVertIcon from '@mui/icons-material/SwapVert';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Typography from '@mui/material/Typography';
+import Badge from '@mui/material/Badge';
+import { Drawer, DrawerHeader, DrawerProps } from './Drawer';
+import { ToolbarButton } from './ToolbarButton';
+
+interface ToolbarSortItemProps {
+ listView: boolean;
+ container: DrawerProps['container'];
+}
+
+export function ToolbarSortItem(props: ToolbarSortItemProps) {
+ const { listView, container } = props;
+ const [open, setOpen] = React.useState(false);
+ const apiRef = useGridApiContext();
+ const fields = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+ const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+ const sortableFields = fields.filter((field) => field.sortable);
+ const sortCount = sortModel.length;
+
+ const handleSortChange = (field: string, sort: GridSortDirection) => {
+ apiRef.current.sortColumn(field, sort, true);
+ };
+
+ return (
+
+ setOpen(true)}>
+
+
+
+
+ setOpen(false)}
+ >
+
+ Sort by
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/list-view/constants.ts b/docs/data/data-grid/list-view/constants.ts
new file mode 100644
index 0000000000000..ee67fc4fb92c0
--- /dev/null
+++ b/docs/data/data-grid/list-view/constants.ts
@@ -0,0 +1,17 @@
+import { FileType } from './types';
+
+export const FILE_TYPES: FileType[] = [
+ 'pdf',
+ 'docx',
+ 'txt',
+ 'mp4',
+ 'mov',
+ 'webm',
+ 'jpg',
+ 'jpeg',
+ 'png',
+ 'gif',
+ 'tiff',
+ 'webp',
+ 'zip',
+];
diff --git a/docs/data/data-grid/list-view/data.ts b/docs/data/data-grid/list-view/data.ts
new file mode 100644
index 0000000000000..3e54d301d2c7f
--- /dev/null
+++ b/docs/data/data-grid/list-view/data.ts
@@ -0,0 +1,204 @@
+import { randomId } from '@mui/x-data-grid-generator';
+import { GridRowModel } from '@mui/x-data-grid-premium';
+import { RowModel } from './types';
+
+export const INITIAL_ROWS: GridRowModel[] = [
+ {
+ id: randomId(),
+ type: 'zip',
+ name: 'archive.zip',
+ description: 'Compressed archive of project files',
+ size: 128_313_213,
+ createdBy: 'Kenan Yusuf',
+ createdAt: new Date('2023-09-15T08:30:00').toISOString(),
+ updatedAt: new Date('2023-09-15T08:30:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'docx',
+ name: 'invoice-322.docx',
+ description: 'Invoice document for client 322',
+ size: 1_694_986,
+ createdBy: 'José Freitas',
+ createdAt: new Date('2024-01-18T11:30:00').toISOString(),
+ updatedAt: new Date().toISOString(), // Today
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'png',
+ name: 'screenshot_2024-02-14_12-34-56.png',
+ description: 'Screenshot of application interface',
+ size: 522_078,
+ createdBy: 'José Freitas',
+ createdAt: new Date('2024-02-14T12:35:16').toISOString(),
+ updatedAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), // Last week
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'mp4',
+ name: 'strategy-meeting.mp4',
+ description: 'Recording of the strategy planning meeting',
+ size: 2_442_044,
+ createdBy: 'José Freitas',
+ createdAt: new Date('2023-12-05T15:40:30').toISOString(),
+ updatedAt: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000).toISOString(), // Last month
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'docx',
+ name: 'project-proposal.docx',
+ description: 'Detailed project proposal document',
+ size: 3_567_890,
+ createdBy: 'Olivier Tassinari',
+ createdAt: new Date('2024-03-01T09:15:00').toISOString(),
+ updatedAt: new Date('2024-03-02T14:30:45').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'png',
+ name: 'logo-design-final.png',
+ description: 'Final version of the company logo design',
+ size: 1_234_567,
+ createdBy: 'Kenan Yusuf',
+ createdAt: new Date('2024-02-28T16:20:00').toISOString(),
+ updatedAt: new Date('2024-02-28T16:20:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'mp4',
+ name: 'product-demo.mp4',
+ description: 'Video demonstration of the new product features',
+ size: 15_789_012,
+ createdBy: 'Olivier Tassinari',
+ createdAt: new Date('2024-02-25T11:45:00').toISOString(),
+ updatedAt: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000).toISOString(), // Last 3 months
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'zip',
+ name: 'project-assets.zip',
+ description: 'Compressed folder containing all project assets',
+ size: 87_654_321,
+ createdBy: 'José Freitas',
+ createdAt: new Date('2024-03-03T13:00:00').toISOString(),
+ updatedAt: new Date('2024-03-03T13:00:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'docx',
+ name: 'meeting-minutes-2024-03-10.docx',
+ description: 'Minutes from the team meeting on March 10, 2024',
+ size: 567_890,
+ createdBy: 'Kenan Yusuf',
+ createdAt: new Date('2024-03-10T14:00:00').toISOString(),
+ updatedAt: new Date('2024-03-10T16:30:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'png',
+ name: 'ui-mockup-v2.png',
+ description: 'Updated user interface mockup',
+ size: 3_456_789,
+ createdBy: 'Olivier Tassinari',
+ createdAt: new Date('2024-03-05T10:20:00').toISOString(),
+ updatedAt: new Date('2024-03-05T10:20:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'mp4',
+ name: 'user-feedback-session.mp4',
+ description: 'Recording of user feedback session',
+ size: 234_567_890,
+ createdBy: 'José Freitas',
+ createdAt: new Date('2024-03-08T13:45:00').toISOString(),
+ updatedAt: new Date('2024-03-08T15:30:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'zip',
+ name: 'legacy-codebase.zip',
+ description: 'Archive of the legacy project codebase',
+ size: 567_890_123,
+ createdBy: 'Kenan Yusuf',
+ createdAt: new Date('2024-02-20T09:00:00').toISOString(),
+ updatedAt: new Date('2024-02-20T09:00:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'docx',
+ name: 'q1-2024-report.docx',
+ description: 'Quarterly report for Q1 2024',
+ size: 4_567_890,
+ createdBy: 'Olivier Tassinari',
+ createdAt: new Date('2024-03-31T23:59:59').toISOString(),
+ updatedAt: new Date('2024-04-01T10:15:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'png',
+ name: 'data-visualization.png',
+ description: 'Chart showing project progress',
+ size: 789_012,
+ createdBy: 'José Freitas',
+ createdAt: new Date('2024-03-15T11:30:00').toISOString(),
+ updatedAt: new Date('2024-03-15T11:30:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'mp4',
+ name: 'code-review-session.mp4',
+ description: 'Recording of code review meeting',
+ size: 345_678_901,
+ createdBy: 'Kenan Yusuf',
+ createdAt: new Date('2024-03-20T14:00:00').toISOString(),
+ updatedAt: new Date('2024-03-20T16:45:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'zip',
+ name: 'design-assets-v3.zip',
+ description: 'Compressed folder of updated design assets',
+ size: 98_765_432,
+ createdBy: 'Olivier Tassinari',
+ createdAt: new Date('2024-03-25T09:30:00').toISOString(),
+ updatedAt: new Date('2024-03-25T09:30:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'docx',
+ name: 'api-documentation.docx',
+ description: 'Comprehensive API documentation',
+ size: 2_345_678,
+ createdBy: 'José Freitas',
+ createdAt: new Date('2024-03-28T16:20:00').toISOString(),
+ updatedAt: new Date('2024-03-29T11:45:00').toISOString(),
+ state: 'uploaded',
+ },
+ {
+ id: randomId(),
+ type: 'png',
+ name: 'error-screenshot.png',
+ description: 'Screenshot of error message for debugging',
+ size: 345_678,
+ createdBy: 'Kenan Yusuf',
+ createdAt: new Date('2024-03-30T08:15:00').toISOString(),
+ updatedAt: new Date('2024-03-30T08:15:00').toISOString(),
+ state: 'uploaded',
+ },
+];
diff --git a/docs/data/data-grid/list-view/list-view.md b/docs/data/data-grid/list-view/list-view.md
new file mode 100644
index 0000000000000..11f4b7ca3e88c
--- /dev/null
+++ b/docs/data/data-grid/list-view/list-view.md
@@ -0,0 +1,29 @@
+---
+title: Data Grid - List view
+---
+
+# Data Grid - List view [](/x/introduction/licensing/#pro-plan 'Pro plan')
+
+
);
diff --git a/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx b/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx
index 667abfb9a412e..2cdb2ddfa58bf 100644
--- a/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx
+++ b/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx
@@ -17,7 +17,7 @@ export default function PageSizeCustomOptions() {
...data.initialState,
pagination: { paginationModel: { pageSize: 5 } },
}}
- pageSizeOptions={[5, 10, 25]}
+ pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
/>
);
diff --git a/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview b/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview
index 88965a8c26f4c..1f4dad3d89948 100644
--- a/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview
+++ b/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview
@@ -4,5 +4,5 @@
...data.initialState,
pagination: { paginationModel: { pageSize: 5 } },
}}
- pageSizeOptions={[5, 10, 25]}
+ pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
/>
\ No newline at end of file
diff --git a/docs/data/data-grid/pagination/pagination.md b/docs/data/data-grid/pagination/pagination.md
index 90b26b56d8d7e..7259d7fca5b02 100644
--- a/docs/data/data-grid/pagination/pagination.md
+++ b/docs/data/data-grid/pagination/pagination.md
@@ -41,10 +41,10 @@ You should provide an array of items, each item should be one of these types:
Using the Data Grid with Joy UI components.
{{"demo": "GridJoyUISlots.js", "bg": "inline"}} diff --git a/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.js b/docs/data/data-grid/layout/GridOverlayHeight.js similarity index 95% rename from docs/data/data-grid/layout/AutoHeightOverlayNoSnap.js rename to docs/data/data-grid/layout/GridOverlayHeight.js index 9b93efc6eaaf3..385ed124616a7 100644 --- a/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.js +++ b/docs/data/data-grid/layout/GridOverlayHeight.js @@ -56,11 +56,10 @@ function CustomNoRowsOverlay() { ); } -export default function AutoHeightOverlayNoSnap() { +export default function GridOverlayHeight() { return ( -
+
+ setOverlayState({ overlay: 'actions', params })
+ }
+ hideFooterSelectedRowCount
+ />
+ handleUpdate(id, 'description', value)}
+ onClose={handleCloseOverlay}
+ />
+
+ setOverlayState({ overlay: 'details', params: overlayState.params })
+ }
+ onRename={() =>
+ setOverlayState({ overlay: 'rename', params: overlayState.params })
+ }
+ onDelete={(id) => {
+ handleDelete([id]);
+ handleCloseOverlay();
+ }}
+ onClose={handleCloseOverlay}
+ />
+ handleUpdate(id, 'name', value)}
+ onClose={handleCloseOverlay}
+ />
+
+
+
+ setOverlayState({ overlay: 'actions', params })
+ }
+ hideFooterSelectedRowCount
+ />
+
+ handleUpdate(id, 'description', value)}
+ onClose={handleCloseOverlay}
+ />
+
+
+ setOverlayState({ overlay: 'details', params: overlayState.params })
+ }
+ onRename={() =>
+ setOverlayState({ overlay: 'rename', params: overlayState.params })
+ }
+ onDelete={(id) => {
+ handleDelete([id]);
+ handleCloseOverlay();
+ }}
+ onClose={handleCloseOverlay}
+ />
+
+ handleUpdate(id, 'name', value)}
+ onClose={handleCloseOverlay}
+ />
+
+ -
+
-
+
-
+
-
+
-
+ {columns.map((column) => {
+ const isVisible = columnVisibilityModel[column.field] !== false;
+ return (
+
-
+ {columns.map((column) => {
+ const isVisible = columnVisibilityModel[column.field] !== false;
+ return (
+
-
+ {DENSITY_OPTIONS.map((option) => {
+ const isActive = density === option.value;
+
+ return (
+
-
+ {DENSITY_OPTIONS.map((option) => {
+ const isActive = density === option.value;
+
+ return (
+
-
+ Date modified
+
+ }
+ >
+ {DATE_MODIFIED_FILTERS.map((option) => {
+ const isActive =
+ option.id === 'all'
+ ? !currentDateModifiedFilter
+ : activeFilters.some((filter) => filter.id === option.id);
+
+ return (
+
-
+ File types
+
+ }
+ >
+ {FILE_TYPES.map((type) => {
+ const isActive = currentFileTypeFilter.includes(type);
+
+ return (
+
-
+
-
+ Date modified
+
+ }
+ >
+ {DATE_MODIFIED_FILTERS.map((option) => {
+ const isActive =
+ option.id === 'all'
+ ? !currentDateModifiedFilter
+ : activeFilters.some((filter) => filter.id === option.id);
+
+ return (
+
-
+ File types
+
+ }
+ >
+ {FILE_TYPES.map((type) => {
+ const isActive = currentFileTypeFilter.includes(type);
+
+ return (
+
-
+
-
+ {sortableFields.map((field) => {
+ const fieldIndexInSortModel = sortModel.findIndex(
+ (sort) => sort.field === field.field,
+ );
+ const fieldInSortModel = sortModel[fieldIndexInSortModel];
+ let nextSort = 'asc';
+
+ if (fieldInSortModel) {
+ nextSort = fieldInSortModel.sort === 'asc' ? 'desc' : null;
+ }
+
+ return (
+
-
+ {sortableFields.map((field) => {
+ const fieldIndexInSortModel = sortModel.findIndex(
+ (sort) => sort.field === field.field,
+ );
+ const fieldInSortModel = sortModel[fieldIndexInSortModel];
+ let nextSort: GridSortDirection = 'asc';
+
+ if (fieldInSortModel) {
+ nextSort = fieldInSortModel.sort === 'asc' ? 'desc' : null;
+ }
+
+ return (
+
Display data in a single-column list view. Can be used to present a more compact grid on smaller screens and mobile devices.
+ +List view can be enabled by providing the `unstable_listView` prop. + +Unlike the default grid view, the list view makes no assumptions on how data is presented to end users. + +In order to display data in a list view, a `unstable_listColumn` prop must be provided with a `renderCell` function. + +:::warning +This feature is under development and is marked as **unstable**. While you can use the list view feature in production, the API could change in the future. +::: + +{{"demo": "ListView.js", "bg": "inline"}} + +## Advanced usage + +The list view feature can be combined with [custom subcomponents](/x/react-data-grid/components/) to provide an improved user experience on small screens. + +{{"demo": "ListViewAdvanced.js", "bg": "inline", "iframe": true, "maxWidth": 360, "height": 600, "hideToolbar": true}} + +:::info +See the code for this demo in [CodeSandbox](https://codesandbox.io/p/sandbox/x-react-data-grid-list-view-zmkzhz). +::: diff --git a/docs/data/data-grid/list-view/types.ts b/docs/data/data-grid/list-view/types.ts new file mode 100644 index 0000000000000..fd0975f3a0b95 --- /dev/null +++ b/docs/data/data-grid/list-view/types.ts @@ -0,0 +1,30 @@ +import { GridRowId } from '@mui/x-data-grid-premium'; + +export type FileType = + | 'pdf' + | 'docx' + | 'txt' + | 'mp4' + | 'mov' + | 'webm' + | 'jpg' + | 'jpeg' + | 'png' + | 'gif' + | 'tiff' + | 'webp' + | 'zip'; + +export type FileState = 'uploaded' | 'pending'; + +export type RowModel = { + id: GridRowId; + type: FileType; + name: string; + description: string; + size: number; + createdBy: string; + createdAt: string; + updatedAt: string; + state: FileState; +}; diff --git a/docs/data/data-grid/list-view/utils.ts b/docs/data/data-grid/list-view/utils.ts new file mode 100644 index 0000000000000..08c93be0d27c4 --- /dev/null +++ b/docs/data/data-grid/list-view/utils.ts @@ -0,0 +1,56 @@ +export function formatDate(value: string | null) { + if (!value) { + return '—'; + } + const date = new Date(value); + const formatter = new Intl.DateTimeFormat('en-US', { + month: 'short', + day: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + }); + return formatter.format(date); +} + +export function formatSize(size: number) { + const units = ['B', 'KB', 'MB', 'GB', 'TB']; + let unitIndex = 0; + let formattedSize = size; + + while (formattedSize >= 1024 && unitIndex < units.length - 1) { + formattedSize /= 1024; + unitIndex += 1; + } + + return `${formattedSize.toFixed(2)} ${units[unitIndex]}`; +} + +export function stringToColor(string: string) { + let hash = 0; + let i: number; + + /* eslint-disable no-bitwise */ + for (i = 0; i < string.length; i += 1) { + hash = string.charCodeAt(i) + ((hash << 5) - hash); + } + + let color = '#'; + + for (i = 0; i < 3; i += 1) { + const value = (hash >> (i * 8)) & 0xff; + color += `00${value.toString(16)}`.slice(-2); + } + /* eslint-enable no-bitwise */ + + return color; +} + +export function stringAvatar(name: string) { + return { + sx: { + bgcolor: stringToColor(name), + }, + children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`, + }; +} diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index 15945bbcef968..fc9f1657230c3 100644 --- a/docs/data/data-grid/localization/data.json +++ b/docs/data/data-grid/localization/data.json @@ -67,7 +67,7 @@ "languageTag": "da-DK", "importName": "daDK", "localeName": "Danish", - "missingKeysCount": 5, + "missingKeysCount": 0, "totalKeysCount": 122, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/daDK.ts" }, @@ -139,7 +139,7 @@ "languageTag": "it-IT", "importName": "itIT", "localeName": "Italian", - "missingKeysCount": 8, + "missingKeysCount": 0, "totalKeysCount": 122, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/itIT.ts" }, @@ -187,7 +187,7 @@ "languageTag": "pl-PL", "importName": "plPL", "localeName": "Polish", - "missingKeysCount": 35, + "missingKeysCount": 11, "totalKeysCount": 122, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/plPL.ts" }, @@ -203,7 +203,7 @@ "languageTag": "pt-BR", "importName": "ptBR", "localeName": "Portuguese (Brazil)", - "missingKeysCount": 4, + "missingKeysCount": 0, "totalKeysCount": 122, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptBR.ts" }, diff --git a/docs/data/data-grid/localization/localization.md b/docs/data/data-grid/localization/localization.md index 3fa3c18931d07..c2baa4fc81890 100644 --- a/docs/data/data-grid/localization/localization.md +++ b/docs/data/data-grid/localization/localization.md @@ -59,7 +59,7 @@ const theme = createTheme( ; ``` -Note that `createTheme` accepts any number of arguments. +Note that `createTheme()` accepts any number of arguments. If you are already using the [translations of the core components](/material-ui/guides/localization/#locale-text), you can add `bgBG` as a new argument. The same import works for Data Grid Pro as it's an extension of Data Grid. @@ -86,7 +86,7 @@ const theme = createTheme( ; ``` -If you want to pass language translations directly to the Data Grid without using `createTheme` and `ThemeProvider`, you can directly load the language translations from `@mui/x-data-grid/locales`. +If you want to pass language translations directly to the Data Grid without using `createTheme()` and `ThemeProvider`, you can directly load the language translations from `@mui/x-data-grid/locales`. ```jsx import { DataGrid } from '@mui/x-data-grid'; diff --git a/docs/data/data-grid/master-detail/master-detail.md b/docs/data/data-grid/master-detail/master-detail.md index cb8614ff1114f..d2366d51cdc0f 100644 --- a/docs/data/data-grid/master-detail/master-detail.md +++ b/docs/data/data-grid/master-detail/master-detail.md @@ -189,6 +189,7 @@ More examples of how to customize the detail panel: - [One expanded detail panel at a time](/x/react-data-grid/row-recipes/#one-expanded-detail-panel-at-a-time) - [Expand or collapse all detail panels](/x/react-data-grid/row-recipes/#expand-or-collapse-all-detail-panels) +- [Toggling detail panels on row click](/x/react-data-grid/row-recipes/#toggling-detail-panels-on-row-click) ## apiRef diff --git a/docs/data/data-grid/overview/DataGridPremiumDemo.js b/docs/data/data-grid/overview/DataGridPremiumDemo.js index 98a6959cff621..3e99541b76cbf 100644 --- a/docs/data/data-grid/overview/DataGridPremiumDemo.js +++ b/docs/data/data-grid/overview/DataGridPremiumDemo.js @@ -2,6 +2,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import { DataGridPremium, + GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, GridToolbar, useGridApiRef, useKeepGroupedColumnsHidden, @@ -40,7 +41,7 @@ export default function DataGridPremiumDemo() { model: ['commodity'], }, sorting: { - sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }], + sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'asc' }], }, aggregation: { model: { diff --git a/docs/data/data-grid/overview/DataGridPremiumDemo.tsx b/docs/data/data-grid/overview/DataGridPremiumDemo.tsx index 98a6959cff621..3e99541b76cbf 100644 --- a/docs/data/data-grid/overview/DataGridPremiumDemo.tsx +++ b/docs/data/data-grid/overview/DataGridPremiumDemo.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import { DataGridPremium, + GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, GridToolbar, useGridApiRef, useKeepGroupedColumnsHidden, @@ -40,7 +41,7 @@ export default function DataGridPremiumDemo() { model: ['commodity'], }, sorting: { - sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }], + sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'asc' }], }, aggregation: { model: { diff --git a/docs/data/data-grid/pagination/PageSizeCustomOptions.js b/docs/data/data-grid/pagination/PageSizeCustomOptions.js index 667abfb9a412e..2cdb2ddfa58bf 100644 --- a/docs/data/data-grid/pagination/PageSizeCustomOptions.js +++ b/docs/data/data-grid/pagination/PageSizeCustomOptions.js @@ -17,7 +17,7 @@ export default function PageSizeCustomOptions() { ...data.initialState, pagination: { paginationModel: { pageSize: 5 } }, }} - pageSizeOptions={[5, 10, 25]} + pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]} />
+
+ );
+}
diff --git a/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx b/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx
new file mode 100644
index 0000000000000..ed3ae91344e34
--- /dev/null
+++ b/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function KeepNonExistentRowsSelected() {
+ const { data } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10,
+ maxColumns: 6,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx.preview b/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx.preview
new file mode 100644
index 0000000000000..b3ad7e26a5efe
--- /dev/null
+++ b/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx.preview
@@ -0,0 +1,14 @@
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.tsx b/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.tsx
new file mode 100644
index 0000000000000..91c7f66a6d996
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import {
+ DataGridPremium,
+ GridDataSource,
+ useGridApiRef,
+ useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+import Button from '@mui/material/Button';
+
+export default function ServerSideRowGroupingDataGrid() {
+ const apiRef = useGridApiRef();
+
+ const { fetchRows, columns } = useMockServer({
+ rowGrouping: true,
+ });
+
+ const dataSource: GridDataSource = React.useMemo(() => {
+ return {
+ getRows: async (params) => {
+ const urlParams = new URLSearchParams({
+ paginationModel: JSON.stringify(params.paginationModel),
+ filterModel: JSON.stringify(params.filterModel),
+ sortModel: JSON.stringify(params.sortModel),
+ groupKeys: JSON.stringify(params.groupKeys),
+ groupFields: JSON.stringify(params.groupFields),
+ });
+ const getRowsResponse = await fetchRows(
+ `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+ );
+ return {
+ rows: getRowsResponse.rows,
+ rowCount: getRowsResponse.rowCount,
+ };
+ },
+ getGroupKey: (row) => row.group,
+ getChildrenCount: (row) => row.descendantCount,
+ };
+ }, [fetchRows]);
+
+ const initialState = useKeepGroupedColumnsHidden({
+ apiRef,
+ initialState: {
+ rowGrouping: {
+ model: ['company', 'director'],
+ },
+ },
+ });
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.tsx.preview b/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.tsx.preview
new file mode 100644
index 0000000000000..920c80a41342d
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.tsx.preview
@@ -0,0 +1,16 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/data/data-grid/server-side-data/ServerSideRowGroupingErrorHandling.js b/docs/data/data-grid/server-side-data/ServerSideRowGroupingErrorHandling.js
new file mode 100644
index 0000000000000..793347a263015
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/ServerSideRowGroupingErrorHandling.js
@@ -0,0 +1,137 @@
+import * as React from 'react';
+import {
+ DataGridPremium,
+ useGridApiRef,
+ useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+import Snackbar from '@mui/material/Snackbar';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { alpha, styled, darken, lighten } from '@mui/material/styles';
+
+export default function ServerSideRowGroupingErrorHandling() {
+ const apiRef = useGridApiRef();
+ const [rootError, setRootError] = React.useState();
+ const [childrenError, setChildrenError] = React.useState();
+ const [shouldRequestsFail, setShouldRequestsFail] = React.useState(false);
+
+ const { fetchRows, columns } = useMockServer(
+ {
+ rowGrouping: true,
+ },
+ {},
+ shouldRequestsFail,
+ );
+
+ const dataSource = React.useMemo(() => {
+ return {
+ getRows: async (params) => {
+ const urlParams = new URLSearchParams({
+ paginationModel: JSON.stringify(params.paginationModel),
+ filterModel: JSON.stringify(params.filterModel),
+ sortModel: JSON.stringify(params.sortModel),
+ groupKeys: JSON.stringify(params.groupKeys),
+ groupFields: JSON.stringify(params.groupFields),
+ });
+ const getRowsResponse = await fetchRows(
+ `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+ );
+ return {
+ rows: getRowsResponse.rows,
+ rowCount: getRowsResponse.rowCount,
+ };
+ },
+ getGroupKey: (row) => row.group,
+ getChildrenCount: (row) => row.descendantCount,
+ };
+ }, [fetchRows]);
+
+ const initialState = useKeepGroupedColumnsHidden({
+ apiRef,
+ initialState: {
+ rowGrouping: {
+ model: ['company', 'director'],
+ },
+ },
+ });
+
+ return (
+
+
+ );
+}
+
+function getBorderColor(theme) {
+ if (theme.palette.mode === 'light') {
+ return lighten(alpha(theme.palette.divider, 1), 0.88);
+ }
+ return darken(alpha(theme.palette.divider, 1), 0.68);
+}
+
+const StyledDiv = styled('div')(({ theme: t }) => ({
+ position: 'absolute',
+ zIndex: 10,
+ fontSize: '0.875em',
+ top: 0,
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: '4px',
+ border: `1px solid ${getBorderColor(t)}`,
+ backgroundColor: t.palette.background.default,
+}));
+
+function ErrorOverlay({ error }) {
+ if (!error) {
+ return null;
+ }
+ return
+
+ setShouldRequestsFail(event.target.checked)}
+ />
+ }
+ label="Make the requests fail"
+ />
+
+
+ {
+ if (!params.groupKeys || params.groupKeys.length === 0) {
+ setRootError(error.message);
+ } else {
+ setChildrenError(
+ `${error.message} (Requested level: ${params.groupKeys.join(' > ')})`,
+ );
+ }
+ }}
+ unstable_dataSourceCache={null}
+ apiRef={apiRef}
+ initialState={initialState}
+ />
+ {rootError && setChildrenError('')}
+ message={childrenError}
+ />
+
+
+
+ );
+}
+
+function getBorderColor(theme: Theme) {
+ if (theme.palette.mode === 'light') {
+ return lighten(alpha(theme.palette.divider, 1), 0.88);
+ }
+ return darken(alpha(theme.palette.divider, 1), 0.68);
+}
+
+const StyledDiv = styled('div')(({ theme: t }) => ({
+ position: 'absolute',
+ zIndex: 10,
+ fontSize: '0.875em',
+ top: 0,
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: '4px',
+ border: `1px solid ${getBorderColor(t)}`,
+ backgroundColor: t.palette.background.default,
+}));
+
+function ErrorOverlay({ error }: { error: string }) {
+ if (!error) {
+ return null;
+ }
+ return
+
+ setShouldRequestsFail(event.target.checked)}
+ />
+ }
+ label="Make the requests fail"
+ />
+
+
+ {
+ if (!params.groupKeys || params.groupKeys.length === 0) {
+ setRootError(error.message);
+ } else {
+ setChildrenError(
+ `${error.message} (Requested level: ${params.groupKeys.join(' > ')})`,
+ );
+ }
+ }}
+ unstable_dataSourceCache={null}
+ apiRef={apiRef}
+ initialState={initialState}
+ />
+ {rootError && setChildrenError('')}
+ message={childrenError}
+ />
+
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/server-side-data/ServerSideRowGroupingFullDataGrid.tsx b/docs/data/data-grid/server-side-data/ServerSideRowGroupingFullDataGrid.tsx
new file mode 100644
index 0000000000000..4545cf49f9e77
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/ServerSideRowGroupingFullDataGrid.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import {
+ DataGridPremium,
+ GridDataSource,
+ useGridApiRef,
+ useKeepGroupedColumnsHidden,
+ GridToolbar,
+} from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+import Button from '@mui/material/Button';
+
+export default function ServerSideRowGroupingFullDataGrid() {
+ const apiRef = useGridApiRef();
+
+ const { fetchRows, columns, loadNewData } = useMockServer({
+ rowGrouping: true,
+ rowLength: 1000,
+ dataSet: 'Commodity',
+ maxColumns: 20,
+ });
+
+ const dataSource: GridDataSource = React.useMemo(() => {
+ return {
+ getRows: async (params) => {
+ const urlParams = new URLSearchParams({
+ paginationModel: JSON.stringify(params.paginationModel),
+ filterModel: JSON.stringify(params.filterModel),
+ sortModel: JSON.stringify(params.sortModel),
+ groupKeys: JSON.stringify(params.groupKeys),
+ groupFields: JSON.stringify(params.groupFields),
+ });
+ const getRowsResponse = await fetchRows(
+ `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+ );
+ return {
+ rows: getRowsResponse.rows,
+ rowCount: getRowsResponse.rowCount,
+ };
+ },
+ getGroupKey: (row) => row.group,
+ getChildrenCount: (row) => row.descendantCount,
+ };
+ }, [fetchRows]);
+
+ const initialState = useKeepGroupedColumnsHidden({
+ apiRef,
+ initialState: {
+ rowGrouping: {
+ model: ['commodity', 'status'],
+ },
+ columns: {
+ columnVisibilityModel: {
+ id: false,
+ },
+ },
+ },
+ });
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/server-side-data/ServerSideRowGroupingGroupExpansion.js b/docs/data/data-grid/server-side-data/ServerSideRowGroupingGroupExpansion.js
new file mode 100644
index 0000000000000..bdb42747fc079
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/ServerSideRowGroupingGroupExpansion.js
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import {
+ DataGridPremium,
+ useGridApiRef,
+ useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+import Button from '@mui/material/Button';
+
+export default function ServerSideRowGroupingGroupExpansion() {
+ const apiRef = useGridApiRef();
+
+ const { fetchRows, columns } = useMockServer({
+ rowGrouping: true,
+ });
+
+ const dataSource = React.useMemo(() => {
+ return {
+ getRows: async (params) => {
+ const urlParams = new URLSearchParams({
+ paginationModel: JSON.stringify(params.paginationModel),
+ filterModel: JSON.stringify(params.filterModel),
+ sortModel: JSON.stringify(params.sortModel),
+ groupKeys: JSON.stringify(params.groupKeys),
+ groupFields: JSON.stringify(params.groupFields),
+ });
+ const getRowsResponse = await fetchRows(
+ `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+ );
+ return {
+ rows: getRowsResponse.rows,
+ rowCount: getRowsResponse.rowCount,
+ };
+ },
+ getGroupKey: (row) => row.group,
+ getChildrenCount: (row) => row.descendantCount,
+ };
+ }, [fetchRows]);
+
+ const initialState = useKeepGroupedColumnsHidden({
+ apiRef,
+ initialState: {
+ rowGrouping: {
+ model: ['company'],
+ },
+ },
+ });
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/server-side-data/ServerSideRowGroupingGroupExpansion.tsx b/docs/data/data-grid/server-side-data/ServerSideRowGroupingGroupExpansion.tsx
new file mode 100644
index 0000000000000..64aa58a45d8e1
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/ServerSideRowGroupingGroupExpansion.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import {
+ DataGridPremium,
+ GridDataSource,
+ useGridApiRef,
+ useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+import Button from '@mui/material/Button';
+
+export default function ServerSideRowGroupingGroupExpansion() {
+ const apiRef = useGridApiRef();
+
+ const { fetchRows, columns } = useMockServer({
+ rowGrouping: true,
+ });
+
+ const dataSource: GridDataSource = React.useMemo(() => {
+ return {
+ getRows: async (params) => {
+ const urlParams = new URLSearchParams({
+ paginationModel: JSON.stringify(params.paginationModel),
+ filterModel: JSON.stringify(params.filterModel),
+ sortModel: JSON.stringify(params.sortModel),
+ groupKeys: JSON.stringify(params.groupKeys),
+ groupFields: JSON.stringify(params.groupFields),
+ });
+ const getRowsResponse = await fetchRows(
+ `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+ );
+ return {
+ rows: getRowsResponse.rows,
+ rowCount: getRowsResponse.rowCount,
+ };
+ },
+ getGroupKey: (row) => row.group,
+ getChildrenCount: (row) => row.descendantCount,
+ };
+ }, [fetchRows]);
+
+ const initialState = useKeepGroupedColumnsHidden({
+ apiRef,
+ initialState: {
+ rowGrouping: {
+ model: ['company'],
+ },
+ },
+ });
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/server-side-data/row-grouping.md b/docs/data/data-grid/server-side-data/row-grouping.md
index 537ef8ad0d54c..25b6044f3f43c 100644
--- a/docs/data/data-grid/server-side-data/row-grouping.md
+++ b/docs/data/data-grid/server-side-data/row-grouping.md
@@ -2,14 +2,90 @@
title: React Server-side row grouping
---
-# Data Grid - Server-side row grouping [](/x/introduction/licensing/#pro-plan 'Pro plan')🚧
+# Data Grid - Server-side row grouping [](/x/introduction/licensing/#pro-plan 'Pro plan')
+
+ Lazy-loaded row grouping with server-side data source.
-:::warning -This feature isn't implemented yet. It's coming. +To dynamically load row grouping data from the server, including lazy-loading of children, create a data source and pass the `unstable_dataSource` prop to the Data Grid, as mentioned in the [overview](/x/react-data-grid/server-side-data/) section. + +:::info +If you are looking for row grouping on the client-side, see [client-side row grouping](/x/react-data-grid/row-grouping/). +::: + +Similar to the [tree data](/x/react-data-grid/server-side-data/tree-data/), you need to pass some additional properties to enable the data source row grouping feature: + +- `getGroupKey()`: Returns the group key for the row. +- `getChildrenCount()`: Returns the number of children for the row. If the children count is not available for some reason, but there are some children, returns `-1`. + +```tsx +const customDataSource: GridDataSource = { + getRows: async (params) => { + // Fetch the data from the server + }, + getGroupKey: (row) => { + // Return the group key for the row, e.g. `name` + return row.name; + }, + getChildrenCount: (row) => { + // Return the number of children for the row + return row.childrenCount; + }, +}; +``` -👍 Upvote [issue #10859](https://github.com/mui/mui-x/issues/10859) if you want to see it land faster. +In addition to `groupKeys`, the `getRows()` callback receives a `groupFields` parameter. This corresponds to the current `rowGroupingModel`. Use `groupFields` on the server to group the data for each `getRows()` call. -Don't hesitate to leave a comment on the same issue to influence what gets built. Especially if you already have a use case for this component, or if you are facing a pain point with your current solution. +```tsx +const getRows: async (params) => { + const urlParams = new URLSearchParams({ + // Example: JSON.stringify(['20th Century Fox', 'James Cameron']) + groupKeys: JSON.stringify(params.groupKeys), + // Example: JSON.stringify(['company', 'director']) + groupFields: JSON.stringify(params.groupFields), + }); + const getRowsResponse = await fetchRows( + // Server should group the data based on `groupFields` and + // extract the rows for the nested level based on `groupKeys` + `https://mui.com/x/api/data-grid?${urlParams.toString()}`, + ); + return { + rows: getRowsResponse.rows, + rowCount: getRowsResponse.rowCount, + }; +} +``` + +{{"demo": "ServerSideRowGroupingDataGrid.js", "bg": "inline"}} + +:::warning +For complex data, consider using `colDef.groupingValueGetter` to extract the grouping value. This value is passed in the `groupKeys` parameter when `getRows` is called. + +Ensure your backend can interpret the `groupKeys` parameter generated by `colDef.groupingValueGetter` to retrieve grouping values for child rows. ::: + +## Error handling + +If an error occurs during a `getRows` call, the Data Grid displays an error message in the row group cell. `unstable_onDataSourceError` is also triggered with the error and the fetch params. + +This example shows error handling with toast notifications and default error messages in grouping cells. Caching is disabled for simplicity. + +{{"demo": "ServerSideRowGroupingErrorHandling.js", "bg": "inline"}} + +## Group expansion + +The group expansion works similar to the [data source tree data](/x/react-data-grid/server-side-data/tree-data/#group-expansion). +The following demo uses `defaultGroupingExpansionDepth='-1'` to expand all the groups. + +{{"demo": "ServerSideRowGroupingGroupExpansion.js", "bg": "inline"}} + +## Demo + +In the following demo, use the auto generated data based on the `Commodities` dataset to simulate the server-side row grouping. + +{{"demo": "ServerSideRowGroupingFullDataGrid.js", "bg": "inline"}} + +## API + +- [DataGrid](/x/api/data-grid/data-grid/) +- [DataGridPro](/x/api/data-grid/data-grid-pro/) +- [DataGridPremium](/x/api/data-grid/data-grid-premium/) diff --git a/docs/data/data-grid/server-side-data/tree-data.md b/docs/data/data-grid/server-side-data/tree-data.md index 8e77fe0542bfa..d5c725ac456ed 100644 --- a/docs/data/data-grid/server-side-data/tree-data.md +++ b/docs/data/data-grid/server-side-data/tree-data.md @@ -8,8 +8,14 @@ title: React Server-side tree data To dynamically load tree data from the server, including lazy-loading of children, you must create a data source and pass the `unstable_dataSource` prop to the Data Grid, as detailed in the [overview section](/x/react-data-grid/server-side-data/). -The data source also requires some additional props to handle tree data, namely `getGroupKey` and `getChildrenCount`. -If the children count is not available for some reason, but there are some children, `getChildrenCount` should return `-1`. +:::info +If you are looking for tree data on the client-side, see [client-side tree data](/x/react-data-grid/tree-data/). +::: + +The data source also requires some additional props to handle tree data: + +- `getGroupKey()`: Returns the group key for the row. +- `getChildrenCount()`: Returns the number of children for the row. If the children count is not available for some reason, but there are some children, returns `-1`. ```tsx const customDataSource: GridDataSource = { @@ -27,6 +33,26 @@ const customDataSource: GridDataSource = { }; ``` +Like the other parameters such as `filterModel`, `sortModel`, and `paginationModel`, the `getRows()` callback receives a `groupKeys` parameter that corresponds to the keys provided for each nested level in `getGroupKey()`. +Use `groupKeys` on the server to extract the rows for a given nested level. + +```tsx +const getRows: async (params) => { + const urlParams = new URLSearchParams({ + // Example: JSON.stringify(['Billy Houston', 'Lora Dean']) + groupKeys: JSON.stringify(params.groupKeys), + }); + const getRowsResponse = await fetchRows( + // Server should extract the rows for the nested level based on `groupKeys` + `https://mui.com/x/api/data-grid?${urlParams.toString()}`, + ); + return { + rows: getRowsResponse.rows, + rowCount: getRowsResponse.rowCount, + }; +} +``` + The following tree data example supports filtering, sorting, and pagination on the server. It also caches the data by default. diff --git a/docs/data/data-grid-component-api-pages.ts b/docs/data/dataGridApiPages.ts similarity index 89% rename from docs/data/data-grid-component-api-pages.ts rename to docs/data/dataGridApiPages.ts index 5aed416321e15..37479bd4801b7 100644 --- a/docs/data/data-grid-component-api-pages.ts +++ b/docs/data/dataGridApiPages.ts @@ -1,6 +1,6 @@ import type { MuiPage } from 'docs/src/MuiPage'; -const apiPages: MuiPage[] = [ +const dataGridApiPages: MuiPage[] = [ { pathname: '/x/api/data-grid/data-grid', title: 'DataGrid', @@ -28,4 +28,4 @@ const apiPages: MuiPage[] = [ title: 'GridToolbarQuickFilter', }, ]; -export default apiPages; +export default dataGridApiPages; diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md index 023e89cb0a05f..e05e9c6e808ab 100644 --- a/docs/data/date-pickers/custom-components/custom-components.md +++ b/docs/data/date-pickers/custom-components/custom-components.md @@ -14,7 +14,7 @@ For example, available Date Picker slots can be found [here](/x/api/date-pickers ::: :::success -See [Common concepts—Custom slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. +See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. ::: ## Action bar diff --git a/docs/data/date-pickers/custom-field/BrowserV6Field.js b/docs/data/date-pickers/custom-field/BrowserV6Field.js deleted file mode 100644 index 63be3f56e8846..0000000000000 --- a/docs/data/date-pickers/custom-field/BrowserV6Field.js +++ /dev/null @@ -1,90 +0,0 @@ -import * as React from 'react'; - -import { unstable_useForkRef as useForkRef } from '@mui/utils'; -import Box from '@mui/material/Box'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; -import { useClearableField } from '@mui/x-date-pickers/hooks'; - -const BrowserField = React.forwardRef((props, ref) => { - const { - // Should be ignored - enableAccessibleFieldDOMStructure, - disabled, - id, - label, - inputRef, - InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, - // extracting `error`, 'focused', and `ownerState` as `input` does not support those props - error, - focused, - ownerState, - sx, - ...other - } = props; - - const handleRef = useForkRef(containerRef, ref); - - return ( -The Date and Time Pickers let you customize the field by passing props or custom components
+The Date and Time Pickers let you customize the field by passing props or custom components.
:::success -See [Common concepts—Custom slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. +See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. ::: ## Customize the default field @@ -66,30 +66,9 @@ Setting `formatDensity` to `"spacious"` will add a space before and after each ` {{"demo": "FieldFormatDensity.js"}} -## Usage with Material UI +## With Material UI -### Using Material `TextField` - -You can import the `TextField` component to create custom wrappers: - -{{"demo": "MaterialV6FieldWrapped.js"}} - -:::success -This approach is only recommended if you need complex customizations on your `TextField`, -or if you already have a wrapper also used outside the Date and Time Pickers. - -If you just need to set some default props, you can use [the `slotProps` prop](/x/react-date-pickers/custom-field/#customize-the-textfield). -::: - -### Using Material `PickersTextField` - -Pass the `enableAccessibleFieldDOMStructure` to any Field or Picker component to enable the accessible DOM structure: - -{{"demo": "MaterialV7Field.js"}} - -:::success -Learn more about the [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure). -::: +### Wrapping `PickersTextField` You can import the `PickersTextField` component to create custom wrappers: @@ -101,80 +80,80 @@ This approach is only recommended if you need complex customizations on your `Pi If you just need to set some default props, you can use [the `slotProps` prop](/x/react-date-pickers/custom-field/#customize-the-textfield). ::: -## Usage with Joy UI +### Using Material `TextField` -### Using Joy `Input` +Pass the `enableAccessibleFieldDOMStructure={false}` to any Field or Picker component to use an `` for the editing instead of the new accessible DOM structure: -You can use the [Joy UI](https://mui.com/joy-ui/getting-started/) components instead of the Material UI ones: +{{"demo": "MaterialV6Field.js"}} -:::info -A higher-level solution for _Joy UI_ will be provided in the near future for even simpler usage. +:::warning +The non-accessible DOM structure will be deprecated in a follow up minor version and remove in `v9.x`. +If you are unable to migrate for some reason, please open an issue to describe what is missing from the new DOM structure so that we can improve it before dropping the old one. ::: -{{"demo": "JoyV6Field.js", "defaultCodeOpen": false}} - -{{"demo": "JoyV6SingleInputRangeField.js", "defaultCodeOpen": false}} +## With another Design System -{{"demo": "JoyV6MultiInputRangeField.js", "defaultCodeOpen": false}} - -### Using Joy `PickersTextField` +### Using a custom input :::warning -This component is not available yet. +You will need to use a component that supports the `sx` prop as a wrapper for your input +to be able to benefit from the **hover** and **focus** behavior of the clear button. +You will have access to the `clearable` and `onClear` props using native HTML elements, +but the on **focus** and **hover** behavior depends on styles applied via the `sx` prop. ::: -## Usage with an unstyled input +{{"demo": "BrowserV7Field.js", "defaultCodeOpen": false}} -### Using the browser input +{{"demo": "BrowserV7SingleInputRangeField.js", "defaultCodeOpen": false}} -{{"demo": "BrowserV6Field.js", "defaultCodeOpen": false}} +{{"demo": "BrowserV7MultiInputRangeField.js", "defaultCodeOpen": false}} -{{"demo": "BrowserV6SingleInputRangeField.js", "defaultCodeOpen": false}} +### Using Joy UI -{{"demo": "BrowserV6MultiInputRangeField.js", "defaultCodeOpen": false}} +You can use the [Joy UI](https://mui.com/joy-ui/getting-started/) components instead of the Material UI ones: -:::warning -You will need to use a component that supports the `sx` prop as a wrapper for your input, in order to be able to benefit from the **hover** and **focus** behavior of the clear button. You will have access to the `clearable` and `onClear` props using native HTML elements, but the on **focus** and **hover** behavior depends on styles applied via the `sx` prop. -::: +{{"demo": "JoyV6Field.js", "defaultCodeOpen": false}} -### Using custom `PickersTextField` +{{"demo": "JoyV6SingleInputRangeField.js", "defaultCodeOpen": false}} -:::success -Learn more about the accessible DOM structure and its difference compared to the current one on the [dedicated doc section](/x/react-date-pickers/fields/#accessible-dom-structure). +{{"demo": "JoyV6MultiInputRangeField.js", "defaultCodeOpen": false}} + +:::warning +All the Joy UI examples use the non-accessible DOM structure. +The new accessible DOM structure will become compatible with Joy UI in the future. ::: -{{"demo": "BrowserV7Field.js", "defaultCodeOpen": false}} +## With a custom editing experience -{{"demo": "BrowserV7SingleInputRangeField.js", "defaultCodeOpen": false}} +### Using an Autocomplete -{{"demo": "BrowserV7MultiInputRangeField.js", "defaultCodeOpen": false}} +If your user can only select a value in a small list of available dates, you can replace the field with the [Autocomplete](/material-ui/react-autocomplete/) component to list those dates: -## Usage with another UI +{{"demo": "behavior-autocomplete/MaterialDatePicker.js", "defaultCodeOpen": false}} -### Using an `Autocomplete` +### Using a masked Text Field -If your user can only select a value in a small list of available dates, -you can replace the field with an `Autocomplete` listing those dates: +If you want to use a simple mask approach for the field editing instead of the built-in logic, you can replace the default field with the [TextField](/material-ui/react-text-field/) component using a masked input value built with the [rifm](https://github.com/realadvisor/rifm) package. -{{"demo": "PickerWithAutocompleteField.js", "defaultCodeOpen": false}} +{{"demo": "behavior-masked-text-field/MaskedMaterialTextField.js", "defaultCodeOpen": false}} -### Using a read-only `TextField` +### Using a read-only Text Field If you want users to select a value exclusively through the views -but you still want the UI to look like a `TextField`, you can replace the field with a read-only `TextField`: +but you still want the UI to look like a Text Field, you can replace the field with a read-only [Text Field](/material-ui/react-text-field/) component: -{{"demo": "custom-behavior/ReadOnlyMaterialTextField.js", "defaultCodeOpen": false}} +{{"demo": "behavior-read-only-text-field/MaterialDatePicker.js", "defaultCodeOpen": false}} -### Using a `Button` +### Using a Button If you want users to select a value exclusively through the views -and you don't want the UI to look like a `TextField`, you can replace the field with a `Button`: +and you don't want the UI to look like a Text Field, you can replace the field with the [Button](/material-ui/react-button/) component: -{{"demo": "PickerWithButtonField.js", "defaultCodeOpen": false}} +{{"demo": "behavior-button/MaterialDatePicker.js", "defaultCodeOpen": false}} -The same can be applied to the `DateRangePicker`: +The same logic can be applied to any Range Picker: -{{"demo": "DateRangePickerWithButtonField.js", "defaultCodeOpen": false}} +{{"demo": "behavior-button/MaterialDateRangePicker.js", "defaultCodeOpen": false}} ## How to build a custom field @@ -184,22 +163,22 @@ On the examples below, you can see that the typing of the props received by a cu ```tsx interface JoyDateFieldProps - extends UseDateFieldPropsThe Date and Time Pickers let you reorganize the layout
+The Date and Time Pickers let you reorganize the layout.
:::success -See [Common concepts—Custom slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. +See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. ::: ## Default layout structure diff --git a/docs/data/date-pickers/custom-opening-button/custom-opening-button.md b/docs/data/date-pickers/custom-opening-button/custom-opening-button.md index 2e71fe686d5b3..21f4b44eeda54 100644 --- a/docs/data/date-pickers/custom-opening-button/custom-opening-button.md +++ b/docs/data/date-pickers/custom-opening-button/custom-opening-button.md @@ -8,7 +8,7 @@ title: Date and Time Pickers - Custom opening buttonThe date picker lets you customize the button to open the views.
:::success -See [Common concepts—Custom slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. +See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. ::: ## Set a custom opening icon diff --git a/docs/data/date-pickers/experimentation/experimentation.md b/docs/data/date-pickers/experimentation/experimentation.md index 88b3ea3fe5ad2..ddecd52bb1e9b 100644 --- a/docs/data/date-pickers/experimentation/experimentation.md +++ b/docs/data/date-pickers/experimentation/experimentation.md @@ -4,4 +4,4 @@ productId: x-date-pickers # Date and Time Pickers experimentation -Demos not accessible through the navbar of the doc
+Demos not accessible through the navbar of the doc.
diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.js b/docs/data/date-pickers/fields/BasicV7DOMStructure.js index 1f32eca967da6..62c0924c3c90d 100644 --- a/docs/data/date-pickers/fields/BasicV7DOMStructure.js +++ b/docs/data/date-pickers/fields/BasicV7DOMStructure.js @@ -8,7 +8,7 @@ export default function BasicV7DOMStructure() { return (This guide describes the changes needed to migrate Charts from v7 to v8.
+ +## Introduction + +This is a reference guide for upgrading `@mui/x-charts` from v7 to v8. +The change between v7 and v8 is mostly here to match the version with other MUI X packages. +No big breaking changes are expected. + +## Start using the new release + +In `package.json`, change the version of the charts package to `next`. + +```diff +-"@mui/x-charts": "^7.0.0", ++"@mui/x-charts": "next", +``` + +Using `next` ensures that it will always use the latest v8 pre-release version, but you can also use a fixed version, like `8.0.0-alpha.0`. + +## Breaking changes + +Since v8 is a major release, it contains some changes that affect the public API. +These changes were done for consistency, improve stability and make room for new features. +Below are described the steps you need to make to migrate from v7 to v8. + +:::info +The list is currently empty, but as we move forward with development during the alpha and beta phases, we'll feed this page with all changes in the API. +::: diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md new file mode 100644 index 0000000000000..eea548d0fbc03 --- /dev/null +++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md @@ -0,0 +1,78 @@ +--- +productId: x-data-grid +--- + +# Migration from v7 to v8 + +This guide describes the changes needed to migrate the Data Grid from v7 to v8.
+ +## Introduction + +This is a reference guide for upgrading `@mui/x-data-grid` from v7 to v8. + +## Start using the new release + +In `package.json`, change the version of the Data Grid package to `next`. + +```diff +-"@mui/x-data-grid": "^7.0.0", ++"@mui/x-data-grid": "next", + +-"@mui/x-data-grid-pro": "^7.0.0", ++"@mui/x-data-grid-pro": "next", + +-"@mui/x-data-grid-premium": "^7.0.0", ++"@mui/x-data-grid-premium": "next", +``` + +Using `next` ensures that it will always use the latest v8 pre-release version, but you can also use a fixed version, like `8.0.0-alpha.0`. + +## Breaking changes + +Since v8 is a major release, it contains some changes that affect the public API. +These changes were done for consistency, improve stability and make room for new features. +Below are described the steps you need to make to migrate from v7 to v8. + +:::info +The list is currently empty, but as we move forward with development during the alpha and beta phases, we'll feed this page with all changes in the API. +::: + + diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 787bbefb3182d..ab73ca9e1900a 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -440,7 +440,7 @@ The headless field hooks (e.g.: `useDateField`) now return a new prop called `en This is used to know if the current UI expected is built using the accessible DOM structure or not. :::info -See [Fields—Accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure) for more details. +See [Migration from v7 to v8—New DOM structure for the field](/x/migration/migration-pickers-v7/#new-dom-structure-for-the-field) for more details. ::: When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM: diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md new file mode 100644 index 0000000000000..a7c30b0a931ba --- /dev/null +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -0,0 +1,422 @@ +--- +productId: x-date-pickers +--- + +# Migration from v7 to v8 + +This guide describes the changes needed to migrate the Date and Time Pickers from v7 to v8.
+ +## Introduction + +This is a reference guide for upgrading `@mui/x-date-pickers` from v7 to v8. + +## Start using the new release + +In `package.json`, change the version of the date pickers package to `next`. + +```diff +-"@mui/x-date-pickers": "7.x.x", ++"@mui/x-date-pickers": "next", +``` + +Using `next` ensures that it will always use the latest v8 pre-release version, but you can also use a fixed version, like `8.0.0-alpha.0`. + +Since `v8` is a major release, it contains changes that affect the public API. +These changes were done for consistency, improved stability and to make room for new features. +Described below are the steps needed to migrate from v7 to v8. + +## Run codemods + +The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v8. You can run `v8.0.0/pickers/preset-safe` targeting only Date and Time Pickers or `v8.0.0/preset-safe` to target the other packages as well. + +You can either run it on a specific file, folder, or your entire codebase when choosing the `This guide describes the changes needed to migrate the Tree View from v7 to v8.
+ +## Introduction + +This is a reference guide for upgrading `@mui/x-tree-view` from v7 to v8. + +## Start using the new release + +In `package.json`, change the version of the Tree View package to `next`. + +```diff +-"@mui/x-tree-view": "7.x.x", ++"@mui/x-tree-view": "next", +``` + +Using `next` ensures that it will always use the latest v8 pre-release version, but you can also use a fixed version, like `8.0.0-alpha.0`. + +Since `v8` is a major release, it contains changes that affect the public API. +These changes were done for consistency, improved stability and to make room for new features. +Described below are the steps needed to migrate from v7 to v8. + +## Run codemods + +The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v8. You can run `v8.0.0/tree-view/preset-safe` targeting only Tree View or `v8.0.0/preset-safe` to target the other packages as well. + +You can either run it on a specific file, folder, or your entire codebase when choosing the `Learn how to customize the Rich Tree View component.
:::success -See [Common concepts—Custom slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. +See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. ::: ## Basics @@ -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 `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 fbf179e3685e8..49db9da0a4e2b 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' }];
+
+
+ setSelectionPropagation((prev) => ({
+ ...prev,
+ descendants: event.target.checked,
+ }))
+ }
+ />
+ }
+ label="Auto select descendants"
+ />
+
+ setSelectionPropagation((prev) => ({
+ ...prev,
+ parents: event.target.checked,
+ }))
+ }
+ />
+ }
+ label="Auto select parents"
+ />
+
+
+
+
+ );
+}
diff --git a/docs/data/tree-view/rich-tree-view/selection/SelectionPropagation.tsx b/docs/data/tree-view/rich-tree-view/selection/SelectionPropagation.tsx
new file mode 100644
index 0000000000000..c41780b8fb9cc
--- /dev/null
+++ b/docs/data/tree-view/rich-tree-view/selection/SelectionPropagation.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { TreeViewSelectionPropagation } from '@mui/x-tree-view/models';
+import { EMPLOYEES_DATASET } from '../../datasets/employees';
+
+export default function SelectionPropagation() {
+ const [selectionPropagation, setSelectionPropagation] =
+ React.useState
+
+
+ setSelectionPropagation((prev) => ({
+ ...prev,
+ descendants: event.target.checked,
+ }))
+ }
+ />
+ }
+ label="Auto select descendants"
+ />
+
+ setSelectionPropagation((prev) => ({
+ ...prev,
+ parents: event.target.checked,
+ }))
+ }
+ />
+ }
+ label="Auto select parents"
+ />
+
+
+
+
+ );
+}
diff --git a/docs/data/tree-view/rich-tree-view/selection/selection.md b/docs/data/tree-view/rich-tree-view/selection/selection.md
index 2175d7ad39787..02036050d5023 100644
--- a/docs/data/tree-view/rich-tree-view/selection/selection.md
+++ b/docs/data/tree-view/rich-tree-view/selection/selection.md
@@ -75,25 +75,36 @@ Use the `onItemSelectionToggle` prop if you want to react to an item selection c
{{"demo": "TrackItemSelectionToggle.js"}}
-## Parent / children selection relationship
+## Automatic parents and children selection
-Automatically select an item when all of its children are selected and automatically select all children when the parent is selected.
+By default, selecting a parent item does not select its children. You can override this behavior using the `selectionPropagation` prop.
-:::warning
-This feature isn't implemented yet. It's coming.
+Here's how it's structured:
-👍 Upvote [issue #4821](https://github.com/mui/mui-x/issues/4821) if you want to see it land faster.
+```ts
+type TreeViewSelectionPropagation = {
+ descendants?: boolean; // default: false
+ parents?: boolean; // default: false
+};
+```
-Don't hesitate to leave a comment on the same issue to influence what gets built.
-Especially if you already have a use case for this component,
-or if you are facing a pain point with your current solution.
-:::
+When `selectionPropagation.descendants` is set to `true`.
+
+- Selecting a parent selects all its descendants automatically.
+- Deselecting a parent deselects all its descendants automatically.
-If you cannot wait for the official implementation,
-you can create your own custom solution using the `selectedItems`,
-`onSelectedItemsChange` and `onItemSelectionToggle` props:
+When `selectionPropagation.parents` is set to `true`.
-{{"demo": "ParentChildrenSelectionRelationship.js"}}
+- Selecting all the descendants of a parent selects the parent automatically.
+- Deselecting a descendant of a selected parent deselects the parent automatically.
+
+The example below demonstrates the usage of the `selectionPropagation` prop.
+
+{{"demo": "SelectionPropagation.js", "defaultCodeOpen": false}}
+
+:::warning
+This feature only works when multi selection is enabled using `props.multiSelect`.
+:::
## Imperative API
@@ -106,13 +117,13 @@ const apiRef = useTreeViewApiRef();
return Learn how to customize the Simple Tree View component.
:::success -See [Common concepts—Custom slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. +See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots. ::: ## Basics @@ -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. @@ -46,7 +46,7 @@ Learn more about the anatomy of the Tree Items and the customization utilities p ### Headless API -Use the `useTreeItem2` hook to create your own component. +Use the `useTreeItem` hook to create your own component. The demo below shows how to add an avatar and custom typography elements. {{"demo": "HeadlessAPI.js", "defaultCodeOpen": false}} @@ -61,13 +61,6 @@ Target the `treeItemClasses.groupTransition` class to add connection borders bet ### Gmail clone -:::warning -This example is built using the new `TreeItem2` component -which adds several slots to modify the content of the Tree Item or change its behavior. - -You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components). -::: - Google's Gmail side nav is potentially one of the web's most famous tree view components. The demo below shows how to replicate it. diff --git a/docs/data/tree-view/simple-tree-view/focus/focus.md b/docs/data/tree-view/simple-tree-view/focus/focus.md index ef9cd7d5558e2..8cc4576f617e0 100644 --- a/docs/data/tree-view/simple-tree-view/focus/focus.md +++ b/docs/data/tree-view/simple-tree-view/focus/focus.md @@ -41,7 +41,7 @@ apiRef.current.focusItem( :::info This method only works with items that are currently visible. -Calling `apiRef.focusItem` on an item whose parent is collapsed will do nothing. +Calling `apiRef.focusItem()` on an item whose parent is collapsed does nothing. ::: {{"demo": "ApiMethodFocusItem.js"}} diff --git a/docs/data/tree-view/simple-tree-view/items/items.md b/docs/data/tree-view/simple-tree-view/items/items.md index c177b4769e2fb..cd516f83665a3 100644 --- a/docs/data/tree-view/simple-tree-view/items/items.md +++ b/docs/data/tree-view/simple-tree-view/items/items.md @@ -51,7 +51,7 @@ Use the `disabled` prop on the Tree Item component to disable interaction and fo #### The disabledItemsFocusable prop -Note that the demo above also includes a switch. +Note that the demo below also includes a switch. This toggles the `disabledItemsFocusable` prop, which controls whether or not a disabled Tree Item can be focused. When this prop is set to false: @@ -91,13 +91,13 @@ const apiRef = useTreeViewApiRef(); return
+
+
+
+
### Content
@@ -81,12 +83,11 @@ 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
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:
```ts
-const CustomTreeItem2GroupTransition = styled(TreeItem2GroupTransition)(({ theme }) => ({
+const CustomTreeItemGroupTransition = styled(TreeItemGroupTransition)(({ theme }) => ({
// ...other styles
paddingLeft: `var(--TreeView-itemChildrenIndentation)`,
}
@@ -95,7 +96,7 @@ const CustomTreeItem2GroupTransition = styled(TreeItem2GroupTransition)(({ theme
If you are using the `indentationAtItemLevel` prop, then instead apply the following padding to your `content` element:
```ts
-const CustomTreeItem2Content = styled(TreeItem2Content)(({ theme }) => ({
+const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
// ...other styles
paddingLeft:
`calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
@@ -116,12 +117,11 @@ 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.
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:
```ts
-const CustomTreeItem2Content = styled(TreeItem2Content)(({ theme }) => ({
+const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
// ...other styles
paddingLeft:
`calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
@@ -132,19 +132,19 @@ const CustomTreeItem2Content = styled(TreeItem2Content)(({ theme }) => ({
## Hooks
-### useTreeItem2
+### useTreeItem
-The `useTreeItem2` hook lets you manage and customize individual Tree Items.
+The `useTreeItem` hook lets you manage and customize individual Tree Items.
You can use it to get the properties needed for all slots, the status of any given Item, or to tap into the interactive API of the Tree View.
#### Slot properties
-The `useTreeItem2` hook gives you granular control over an Item's layout by providing resolvers to get the appropriate props for each slot.
+The `useTreeItem` hook gives you granular control over an Item's layout by providing resolvers to get the appropriate props for each slot.
This makes it possible to build a fully custom layout for your Tree Items.
The demo below shows how to get the props needed for each slot, and how to pass them correctly.
-{{"demo": "useTreeItem2HookProperties.js"}}
+{{"demo": "useTreeItemHookProperties.js"}}
You can pass additional props to a slot—or override existing slots—by passing an object argument to the slot's props resolver, as shown below:
@@ -159,34 +159,34 @@ You can pass additional props to a slot—or override existing slots—by passin
#### Item status
-The `useTreeItem2` hook also returns a `status` object that holds boolean values for each possible state of a Tree Item.
+The `useTreeItem` hook also returns a `status` object that holds boolean values for each possible state of a Tree Item.
```jsx
const {
status: { expanded, expandable, focused, selected, disabled, editable, editing },
-} = useTreeItem2(props);
+} = useTreeItem(props);
```
You can use these statuses to apply custom styling to the item or conditionally render subcomponents.
-{{"demo": "useTreeItem2HookStatus.js"}}
+{{"demo": "useTreeItemHookStatus.js"}}
#### Imperative API
The `publicAPI` object provides a number of methods to programmatically interact with the Tree View.
-You can use the `useTreeItem2` hook to access the `publicAPI` object from within a Tree Item.
+You can use the `useTreeItem` hook to access the `publicAPI` object from within a Tree Item.
-{{"demo": "useTreeItem2HookPublicAPI.js"}}
+{{"demo": "useTreeItemHookPublicAPI.js"}}
See the **Imperative API** section on each feature page to learn more about the public API methods available on the Tree View.
-### `useTreeItem2Utils`
+### `useTreeItemUtils`
-The `useTreeItem2Utils` hook provides a set of interaction methods for implementing custom behaviors for the Tree View.
+The `useTreeItemUtils` hook provides a set of interaction methods for implementing custom behaviors for the Tree View.
It also returns the status of the Item.
```jsx
-const { interactions, status } = useTreeItem2Utils({
+const { interactions, status } = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
@@ -225,7 +225,7 @@ The demo below shows how to introduce a new element that expands and collapses t
#### Label editing
-The `useTreeItem2Utils` hook provides the following interaction methods relevant to label editing behavior:
+The `useTreeItemUtils` hook provides the following interaction methods relevant to label editing behavior:
```jsx
const {
@@ -234,7 +234,7 @@ const {
handleCancelItemLabelEditing,
handleSaveItemLabel,
},
-} = useTreeItem2Utils({
+} = useTreeItemUtils({
itemId: props.itemId,
children: props.children,
});
diff --git a/docs/data/tree-view/tree-item-customization/useTreeItem2HookProperties.js b/docs/data/tree-view/tree-item-customization/useTreeItem2HookProperties.js
deleted file mode 100644
index b93e60f39e001..0000000000000
--- a/docs/data/tree-view/tree-item-customization/useTreeItem2HookProperties.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2';
-import {
- TreeItem2Checkbox,
- TreeItem2Content,
- TreeItem2IconContainer,
- TreeItem2Label,
- TreeItem2Root,
- TreeItem2GroupTransition,
-} from '@mui/x-tree-view/TreeItem2';
-import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
-import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
-import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
-import { TreeItem2LabelInput } from '@mui/x-tree-view/TreeItem2LabelInput';
-import { MUI_X_PRODUCTS } from './products';
-
-const CustomTreeItem = React.forwardRef(function CustomTreeItem(
- { id, itemId, label, disabled, children },
- ref,
-) {
- const {
- getRootProps,
- getContentProps,
- getIconContainerProps,
- getCheckboxProps,
- getLabelProps,
- getLabelInputProps,
- getGroupTransitionProps,
- getDragAndDropOverlayProps,
- status,
- } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
-
- return (
- | 'line'
| 'none', y?: 'band'
| 'line'
| 'none' }" - }, - "default": "{ x: 'none', y: 'none' }", - "seeMoreLink": { - "url": "https://mui.com/x/react-charts/highlighting", - "text": "highlighting docs" - } - }, - "bottomAxis": { - "type": { "name": "union", "description": "object
| string" }, - "default": "null" - }, "colors": { "type": { "name": "union", "description": "Array<string>
| func" }, "default": "blueberryTwilightPalette" @@ -32,19 +17,6 @@ "description": "{ dataIndex?: number, seriesId?: number
| string }" } }, - "leftAxis": { - "type": { "name": "union", "description": "object
| string" }, - "default": "null" - }, - "legend": { - "type": { - "name": "shape", - "description": "{ classes?: object, direction?: 'column'
| 'row', hidden?: bool, itemGap?: number, itemMarkHeight?: number, itemMarkWidth?: number, labelStyle?: object, markGap?: number, onItemClick?: func, padding?: number
| { bottom?: number, left?: number, right?: number, top?: number }, position?: { horizontal: 'left'
| 'middle'
| 'right', vertical: 'bottom'
| 'middle'
| 'top' }, slotProps?: object, slots?: object }" - }, - "default": "{ direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }", - "deprecated": true, - "deprecationInfo": "Consider using
slotProps.legend instead."
- },
"loading": { "type": { "name": "bool" }, "default": "false" },
"margin": {
"type": {
@@ -62,10 +34,6 @@
},
"onItemClick": { "type": { "name": "func" } },
"resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
- "rightAxis": {
- "type": { "name": "union", "description": "object| string" }, - "default": "null" - }, "skipAnimation": { "type": { "name": "bool" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { @@ -81,10 +49,6 @@ "default": "{ trigger: 'item' }", "seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" } }, - "topAxis": { - "type": { "name": "union", "description": "object
| string" }, - "default": "null" - }, "width": { "type": { "name": "number" } }, "xAxis": { "type": { @@ -112,30 +76,6 @@ "default": "DefaultChartsAxisTooltipContent", "class": null }, - { - "name": "axisLabel", - "description": "Custom component for axis label.", - "default": "ChartsText", - "class": null - }, - { - "name": "axisLine", - "description": "Custom component for the axis main line.", - "default": "'line'", - "class": null - }, - { - "name": "axisTick", - "description": "Custom component for the axis tick.", - "default": "'line'", - "class": null - }, - { - "name": "axisTickLabel", - "description": "Custom component for tick label.", - "default": "ChartsText", - "class": null - }, { "name": "itemContent", "description": "Custom component for displaying tooltip content when triggered by item event.", diff --git a/docs/pages/x/api/charts/scatter-series-type.json b/docs/pages/x/api/charts/scatter-series-type.json index 9d560abcee2dd..5f422acb68962 100644 --- a/docs/pages/x/api/charts/scatter-series-type.json +++ b/docs/pages/x/api/charts/scatter-series-type.json @@ -19,10 +19,7 @@ "markerSize": { "type": { "description": "number" } }, "valueFormatter": { "type": { "description": "SeriesValueFormatter<TValue>" } }, "xAxisId": { "type": { "description": "string" } }, - "xAxisKey": { "type": { "description": "string" } }, "yAxisId": { "type": { "description": "string" } }, - "yAxisKey": { "type": { "description": "string" } }, - "zAxisId": { "type": { "description": "string" } }, - "zAxisKey": { "type": { "description": "string" } } + "zAxisId": { "type": { "description": "string" } } } } 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 1667cca1371e9..ded5c1bd3c907 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -588,7 +588,11 @@ "rowGroupingModel": { "type": { "name": "arrayOf", "description": "Array<string>" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, - "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, + "rowPositionsDebounceMs": { + "type": { "name": "number" }, + "default": "166", + "deprecated": true + }, "rowReordering": { "type": { "name": "bool" }, "default": "false" }, "rows": { "type": { "name": "arrayOf", "description": "Array<object>" }, @@ -645,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", @@ -785,12 +796,36 @@ "default": "GridRow", "class": "MuiDataGridPremium-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, + { + "name": "baseMenuList", + "description": "The custom MenuList component used in the grid.", + "default": "MenuList", + "class": null + }, + { + "name": "baseMenuItem", + "description": "The custom MenuItem component used in the grid.", + "default": "MenuItem", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", 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 cc714abf8fba2..42df3c1393111 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -523,7 +523,11 @@ "rowCount": { "type": { "name": "number" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, - "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, + "rowPositionsDebounceMs": { + "type": { "name": "number" }, + "default": "166", + "deprecated": true + }, "rowReordering": { "type": { "name": "bool" }, "default": "false" }, "rows": { "type": { "name": "arrayOf", "description": "Array<object>" }, @@ -576,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", @@ -717,12 +728,36 @@ "default": "GridRow", "class": "MuiDataGridPro-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, + { + "name": "baseMenuList", + "description": "The custom MenuList component used in the grid.", + "default": "MenuList", + "class": null + }, + { + "name": "baseMenuItem", + "description": "The custom MenuItem component used in the grid.", + "default": "MenuItem", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 3fd158be8aa04..9994e0dc63178 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -439,7 +439,11 @@ "rowCount": { "type": { "name": "number" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, - "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, + "rowPositionsDebounceMs": { + "type": { "name": "number" }, + "default": "166", + "deprecated": true + }, "rows": { "type": { "name": "arrayOf", "description": "Array<object>" }, "default": "[]" @@ -611,12 +615,36 @@ "default": "GridRow", "class": "MuiDataGrid-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, + { + "name": "baseMenuList", + "description": "The custom MenuList component used in the grid.", + "default": "MenuList", + "class": null + }, + { + "name": "baseMenuItem", + "description": "The custom MenuItem component used in the grid.", + "default": "MenuItem", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", diff --git a/docs/pages/x/api/data-grid/grid-print-export-options.json b/docs/pages/x/api/data-grid/grid-print-export-options.json index 6d19c1df3ffc0..09e234b76a5a0 100644 --- a/docs/pages/x/api/data-grid/grid-print-export-options.json +++ b/docs/pages/x/api/data-grid/grid-print-export-options.json @@ -18,6 +18,6 @@ "hideFooter": { "type": { "description": "boolean" }, "default": "false" }, "hideToolbar": { "type": { "description": "boolean" }, "default": "false" }, "includeCheckboxes": { "type": { "description": "boolean" }, "default": "false" }, - "pageStyle": { "type": { "description": "string | Function" } } + "pageStyle": { "type": { "description": "string | (() => string)" } } } } 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 7cd100636eb8f..79efa85605209 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 @@ -134,6 +134,10 @@ } }, "selectedItems": { "type": { "name": "any" } }, + "selectionPropagation": { + "type": { "name": "shape", "description": "{ descendants?: bool, parents?: bool }" }, + "default": "{ parents: false, descendants: false }" + }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, @@ -178,7 +182,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 53335f98fc5e9..83ada41f5bc56 100644 --- a/docs/pages/x/api/tree-view/rich-tree-view.json +++ b/docs/pages/x/api/tree-view/rich-tree-view.json @@ -109,6 +109,10 @@ } }, "selectedItems": { "type": { "name": "any" } }, + "selectionPropagation": { + "type": { "name": "shape", "description": "{ descendants?: bool, parents?: bool }" }, + "default": "{ parents: false, descendants: false }" + }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, @@ -153,7 +157,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 } ], @@ -164,6 +168,6 @@ "forwardsRefTo": "HTMLUListElement", "filename": "/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx", "inheritance": null, - "demos": "
- Tree View - Getting Started \n
- Rich Tree View - Customization \n
- Rich Tree View - Expansion \n
- Rich Tree View - Focus \n
- Rich Tree View - Items \n
- Rich Tree View - Selection \n
- Tree Item Customization
- Tree View - Getting Started \n
- Rich Tree View - Customization \n
- Rich Tree View - Label editing \n
- Rich Tree View - Expansion \n
- Rich Tree View - Focus \n
- Rich Tree View - Items \n
- Rich Tree View - Selection \n
- Tree Item Customization
- Rich Tree View - Customization \n
- Rich Tree View - Ordering \n
- Simple Tree View - Customization \n
- Tree Item Customization
TreeItem2 component or the useTreeItem2 hook instead. For more detail, 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/."
- },
"disabled": { "type": { "name": "bool" }, "default": "false" },
+ "id": { "type": { "name": "string" } },
"label": { "type": { "name": "node" } },
+ "onBlur": { "type": { "name": "func" } },
"onFocus": { "type": { "name": "custom", "description": "unsupportedProp" } },
"onKeyDown": { "type": { "name": "func" } },
"slotProps": { "type": { "name": "object" }, "default": "{}" },
@@ -23,13 +14,6 @@
"type": { "name": "object" },
"default": "{}",
"additionalInfo": { "slotsApi": true }
- },
- "sx": {
- "type": {
- "name": "union",
- "description": "Array<func| object
| bool>
| func
| object" - }, - "additionalInfo": { "sx": true } } }, "name": "TreeItem", @@ -39,46 +23,70 @@ "import { TreeItem } from '@mui/x-tree-view-pro';" ], "slots": [ - { "name": "collapseIcon", "description": "The icon used to collapse the item.", "class": null }, - { "name": "expandIcon", "description": "The icon used to expand the item.", "class": null }, - { "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.", - "class": null + "name": "root", + "description": "The component that renders the root.", + "default": "TreeItemRoot", + "class": "MuiTreeItem-root" + }, + { + "name": "content", + "description": "The component that renders the content of the item.\n(e.g.: everything related to this item, not to its children).", + "default": "TreeItemContent", + "class": "MuiTreeItem-content" }, { "name": "groupTransition", - "description": "The component that animates the appearance / disappearance of the item's children.", - "default": "TreeItem2Group", + "description": "The component that renders the children of the item.", + "default": "TreeItemGroupTransition", "class": "MuiTreeItem-groupTransition" - } - ], - "classes": [ + }, { - "key": "checkbox", - "className": "MuiTreeItem-checkbox", - "description": "Styles applied to the checkbox element.", - "isGlobal": false + "name": "iconContainer", + "description": "The component that renders the icon.", + "default": "TreeItemIconContainer", + "class": "MuiTreeItem-iconContainer" }, { - "key": "content", - "className": "MuiTreeItem-content", - "description": "Styles applied to the content element.", - "isGlobal": false + "name": "checkbox", + "description": "The component that renders the item checkbox for selection.", + "default": "TreeItemCheckbox", + "class": "MuiTreeItem-checkbox" }, + { + "name": "label", + "description": "The component that renders the item label.", + "default": "TreeItemLabel", + "class": "MuiTreeItem-label" + }, + { + "name": "labelInput", + "description": "The component that renders the input to edit the label when the item is editable and is currently being edited.", + "default": "TreeItemLabelInput", + "class": "MuiTreeItem-labelInput" + }, + { + "name": "dragAndDropOverlay", + "description": "The component that renders the overlay when an item reordering is ongoing.\nWarning: This slot is only useful when using the `
- Tree View - Getting Started \n
- Rich Tree View - Customization \n
- Rich Tree View - Expansion \n
- Rich Tree View - Focus \n
- Rich Tree View - Items \n
- Rich Tree View - Ordering \n
- Rich Tree View - Selection \n
- Simple Tree View - Customization \n
- Simple Tree View - Expansion \n
- Simple Tree View - Focus \n
- Simple Tree View - Items \n
- Simple Tree View - Selection \n
- Tree Item Customization
- Tree View - Getting Started \n
- Rich Tree View - Customization \n
- Rich Tree View - Label editing \n
- Rich Tree View - Expansion \n
- Rich Tree View - Focus \n
- Rich Tree View - Items \n
- Rich Tree View - Ordering \n
- Rich Tree View - Selection \n
- Simple Tree View - Customization \n
- Simple Tree View - Expansion \n
- Simple Tree View - Focus \n
- Simple Tree View - Items \n
- Simple Tree View - Selection \n
- Tree Item Customization
ChartsXAxisProps."
- },
"colors": { "description": "Color palette used to colorize multiple series." },
"dataset": {
"description": "An array of objects that can be used to populate series and axes data using their dataKey property."
@@ -21,10 +14,6 @@
"highlightedItem": {
"description": "The item currently highlighted. Turns highlighting into a controlled prop."
},
- "leftAxis": {
- "description": "Indicate which axis to display the left of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps."
- },
- "legend": { "description": "The props of the legend." },
"loading": { "description": "If true, a loading overlay is displayed." },
"margin": {
"description": "The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts an object with the optional properties: top, bottom, left, and right."
@@ -37,9 +26,6 @@
"resolveSizeBeforeRender": {
"description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." }, - "rightAxis": { - "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object
ChartsYAxisProps."
- },
"series": {
"description": "The series to display in the pie chart. An array of PieSeriesType objects."
},
@@ -52,9 +38,6 @@
"description": "The configuration of the tooltip.",
"seeMoreText": "See {{link}} for more details."
},
- "topAxis": {
- "description": "Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps."
- },
"width": {
"description": "The width of the chart in px. If not defined, it takes the width of the parent element."
},
@@ -68,10 +51,6 @@
"classDescriptions": {},
"slotDescriptions": {
"axisContent": "Custom component for displaying tooltip content when triggered by axis event.",
- "axisLabel": "Custom component for axis label.",
- "axisLine": "Custom component for the axis main line.",
- "axisTick": "Custom component for the axis tick.",
- "axisTickLabel": "Custom component for tick label.",
"itemContent": "Custom component for displaying tooltip content when triggered by item event.",
"legend": "Custom rendering of the legend.",
"loadingOverlay": "Overlay component rendered when the chart is in a loading state.",
diff --git a/docs/translations/api-docs/charts/scatter-series-type.json b/docs/translations/api-docs/charts/scatter-series-type.json
index 4f3fed0aa9e92..58a593f0bdbf6 100644
--- a/docs/translations/api-docs/charts/scatter-series-type.json
+++ b/docs/translations/api-docs/charts/scatter-series-type.json
@@ -20,10 +20,7 @@
"description": "Formatter used to render values in tooltip or other data display."
},
"xAxisId": { "description": "The id of the x-axis used to render the series." },
- "xAxisKey": { "description": "The id of the x-axis used to render the series." },
"yAxisId": { "description": "The id of the y-axis used to render the series." },
- "yAxisKey": { "description": "The id of the y-axis used to render the series." },
- "zAxisId": { "description": "The id of the z-axis used to render the series." },
- "zAxisKey": { "description": "The id of the z-axis used to render the series." }
+ "zAxisId": { "description": "The id of the z-axis used to render the series." }
}
}
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 78865102281cb..3b9442aa58e3b 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."
}
@@ -1224,13 +1230,17 @@
}
},
"slotDescriptions": {
+ "baseBadge": "The custom Badge component used in the grid for both header and cells.",
"baseButton": "The custom Button component used in the grid.",
"baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
"baseChip": "The custom Chip component used in the grid.",
+ "baseDivider": "The custom Divider component used in the grid.",
"baseFormControl": "The custom FormControl component used in the grid.",
"baseIconButton": "The custom IconButton component used in the grid.",
"baseInputAdornment": "The custom InputAdornment component used in the grid.",
"baseInputLabel": "The custom InputLabel component used in the grid.",
+ "baseMenuItem": "The custom MenuItem component used in the grid.",
+ "baseMenuList": "The custom MenuList component used in the grid.",
"basePopper": "The custom Popper component used in the grid.",
"baseSelect": "The custom Select component used in the grid.",
"baseSelectOption": "The custom SelectOption component used in the grid.",
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 a0509f2e45491..c1d26982ac46e 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."
}
@@ -1162,13 +1168,17 @@
}
},
"slotDescriptions": {
+ "baseBadge": "The custom Badge component used in the grid for both header and cells.",
"baseButton": "The custom Button component used in the grid.",
"baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
"baseChip": "The custom Chip component used in the grid.",
+ "baseDivider": "The custom Divider component used in the grid.",
"baseFormControl": "The custom FormControl component used in the grid.",
"baseIconButton": "The custom IconButton component used in the grid.",
"baseInputAdornment": "The custom InputAdornment component used in the grid.",
"baseInputLabel": "The custom InputLabel component used in the grid.",
+ "baseMenuItem": "The custom MenuItem component used in the grid.",
+ "baseMenuList": "The custom MenuList component used in the grid.",
"basePopper": "The custom Popper component used in the grid.",
"baseSelect": "The custom Select component used in the grid.",
"baseSelectOption": "The custom SelectOption component used in the grid.",
diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
index 9cf3ea258f2a7..d082ef5d495db 100644
--- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -1048,13 +1048,17 @@
}
},
"slotDescriptions": {
+ "baseBadge": "The custom Badge component used in the grid for both header and cells.",
"baseButton": "The custom Button component used in the grid.",
"baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
"baseChip": "The custom Chip component used in the grid.",
+ "baseDivider": "The custom Divider component used in the grid.",
"baseFormControl": "The custom FormControl component used in the grid.",
"baseIconButton": "The custom IconButton component used in the grid.",
"baseInputAdornment": "The custom InputAdornment component used in the grid.",
"baseInputLabel": "The custom InputLabel component used in the grid.",
+ "baseMenuItem": "The custom MenuItem component used in the grid.",
+ "baseMenuList": "The custom MenuList component used in the grid.",
"basePopper": "The custom Popper component used in the grid.",
"baseSelect": "The custom Select component used in the grid.",
"baseSelectOption": "The custom SelectOption component used in the grid.",
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 3a33b96c08bd8..b43dd9784328a 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."
@@ -137,6 +137,9 @@
"selectedItems": {
"description": "Selected item ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string."
},
+ "selectionPropagation": {
+ "description": "When selectionPropagation.descendants is set to true.- Selecting a parent selects all its descendants automatically. - Deselecting a parent deselects all its descendants automatically.
When
selectionPropagation.parents is set to true.- Selecting all the descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically.
Only works when
multiSelect is true. On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)"
+ },
"slotProps": { "description": "The props used for each component slot." },
"slots": { "description": "Overridable component slots." },
"sx": {
@@ -146,7 +149,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 3ba5993e51879..a2fdbd15c255a 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."
@@ -108,6 +108,9 @@
"selectedItems": {
"description": "Selected item ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string."
},
+ "selectionPropagation": {
+ "description": "When selectionPropagation.descendants is set to true.- Selecting a parent selects all its descendants automatically. - Deselecting a parent deselects all its descendants automatically.
When
selectionPropagation.parents is set to true.- Selecting all the descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically.
Only works when
multiSelect is true. On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)"
+ },
"slotProps": { "description": "The props used for each component slot." },
"slots": { "description": "Overridable component slots." },
"sx": {
@@ -117,7 +120,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 a56fd8d2d75af..86afc50c65dbd 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."
@@ -84,6 +84,9 @@
"selectedItems": {
"description": "Selected item ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string."
},
+ "selectionPropagation": {
+ "description": "When selectionPropagation.descendants is set to true.- Selecting a parent selects all its descendants automatically. - Deselecting a parent deselects all its descendants automatically.
When
selectionPropagation.parents is set to true.- Selecting all the descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically.
Only works when
multiSelect is true. On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)"
+ },
"slotProps": { "description": "The props used for each component slot." },
"slots": { "description": "Overridable component slots." },
"sx": {
@@ -93,7 +96,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
deleted file mode 100644
index 1ec2e89e98d8e..0000000000000
--- a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json
+++ /dev/null
@@ -1,65 +0,0 @@
-{
- "componentDescription": "",
- "propDescriptions": {
- "children": { "description": "The content of the component." },
- "classes": { "description": "Override or extend the styles applied to the component." },
- "disabled": { "description": "If true, the item is disabled." },
- "id": { "description": "The id attribute of the item. If not provided, it will be generated." },
- "itemId": { "description": "The id of the item. Must be unique." },
- "label": { "description": "The label of the item." },
- "onBlur": { "description": "Callback fired when the item root is blurred." },
- "onFocus": {
- "description": "This prop isn't supported. Use the onItemFocus callback on the tree if you need to monitor an item's focus."
- },
- "onKeyDown": {
- "description": "Callback fired when a key is pressed on the keyboard and the tree is in focus."
- },
- "slotProps": { "description": "The props used for each component slot." },
- "slots": { "description": "Overridable component slots." }
- },
- "classDescriptions": {
- "disabled": {
- "description": "State class applied to {{nodeName}} when {{conditions}}.",
- "nodeName": "the element",
- "conditions": "disabled"
- },
- "editable": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the content of the items that are editable"
- },
- "editing": {
- "description": "Styles applied to {{nodeName}} when {{conditions}}.",
- "nodeName": "the content element",
- "conditions": "editing is enabled"
- },
- "expanded": {
- "description": "State class applied to {{nodeName}} when {{conditions}}.",
- "nodeName": "the content element",
- "conditions": "expanded"
- },
- "focused": {
- "description": "State class applied to {{nodeName}} when {{conditions}}.",
- "nodeName": "the content element",
- "conditions": "focused"
- },
- "selected": {
- "description": "State class applied to {{nodeName}} when {{conditions}}.",
- "nodeName": "the content element",
- "conditions": "selected"
- }
- },
- "slotDescriptions": {
- "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.",
- "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.",
- "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.",
- "root": "The component that renders the root."
- }
-}
diff --git a/docs/translations/api-docs/tree-view/tree-item-drag-and-drop-overlay/tree-item-drag-and-drop-overlay.json b/docs/translations/api-docs/tree-view/tree-item-drag-and-drop-overlay/tree-item-drag-and-drop-overlay.json
new file mode 100644
index 0000000000000..f93d4cbd8c798
--- /dev/null
+++ b/docs/translations/api-docs/tree-view/tree-item-drag-and-drop-overlay/tree-item-drag-and-drop-overlay.json
@@ -0,0 +1 @@
+{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
diff --git a/docs/translations/api-docs/tree-view/tree-item-icon/tree-item-icon.json b/docs/translations/api-docs/tree-view/tree-item-icon/tree-item-icon.json
new file mode 100644
index 0000000000000..c39a07ae223f2
--- /dev/null
+++ b/docs/translations/api-docs/tree-view/tree-item-icon/tree-item-icon.json
@@ -0,0 +1,14 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "slotProps": { "description": "The props used for each component slot." },
+ "slots": { "description": "Overridable component slots." }
+ },
+ "classDescriptions": {},
+ "slotDescriptions": {
+ "collapseIcon": "The icon used to collapse the item.",
+ "endIcon": "The icon displayed next to an end item.",
+ "expandIcon": "The icon used to expand the item.",
+ "icon": "The icon to display next to the Tree Item's label."
+ }
+}
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 f0febee14167b..5177a55030aaa 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
@@ -3,44 +3,26 @@
"propDescriptions": {
"children": { "description": "The content of the component." },
"classes": { "description": "Override or extend the styles applied to the component." },
- "ContentComponent": {
- "description": "The component used to render the content of the item.",
- "requiresRef": true
- },
- "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." },
+ "id": { "description": "The id attribute of the item. If not provided, it will be generated." },
+ "itemId": { "description": "The id of the item. Must be unique." },
+ "label": { "description": "The label of the item." },
+ "onBlur": { "description": "Callback fired when the item root is blurred." },
"onFocus": {
- "description": "This prop isn't supported. Use the onItemFocus callback on the tree if you need to monitor a item's focus."
+ "description": "This prop isn't supported. Use the onItemFocus callback on the tree if you need to monitor an item's focus."
},
"onKeyDown": {
- "description": "Callback fired when a key of the keyboard is pressed on the item."
+ "description": "Callback fired when a key is pressed on the keyboard and the tree is in focus."
},
"slotProps": { "description": "The props used for each component slot." },
- "slots": { "description": "Overridable component slots." },
- "sx": {
- "description": "The system prop that allows defining system overrides as well as additional CSS styles."
- }
+ "slots": { "description": "Overridable component slots." }
},
"classDescriptions": {
- "checkbox": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the checkbox element"
- },
- "content": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the content element"
- },
"disabled": {
"description": "State class applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the element",
"conditions": "disabled"
},
- "dragAndDropOverlay": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the drag and drop overlay"
- },
"editable": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the content of the items that are editable"
@@ -60,17 +42,6 @@
"nodeName": "the content element",
"conditions": "focused"
},
- "iconContainer": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the tree item icon"
- },
- "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label element" },
- "labelInput": {
- "description": "Styles applied to {{nodeName}} when {{conditions}}.",
- "nodeName": "the input element that is visible",
- "conditions": "editing is enabled"
- },
- "root": { "description": "Styles applied to the root element." },
"selected": {
"description": "State class applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the content element",
@@ -78,10 +49,17 @@
}
},
"slotDescriptions": {
+ "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.",
"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."
+ "groupTransition": "The component that renders the children of the item.",
+ "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.",
+ "root": "The component that renders the root."
}
}
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 765c53c0efd9e..7558c542dc419 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."
@@ -84,6 +84,9 @@
"selectedItems": {
"description": "Selected item ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string."
},
+ "selectionPropagation": {
+ "description": "When selectionPropagation.descendants is set to true.- Selecting a parent selects all its descendants automatically. - Deselecting a parent deselects all its descendants automatically.
When
selectionPropagation.parents is set to true.- Selecting all the descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically.
Only works when
multiSelect is true. On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)"
+ },
"slotProps": { "description": "The props used for each component slot." },
"slots": { "description": "Overridable component slots." },
"sx": {
@@ -93,7 +96,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 02e54753d4f5e..c133b697217a2 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",
@@ -62,8 +62,8 @@
"release:changelog": "node scripts/releaseChangelog.mjs",
"release:version": "lerna version --exact --no-changelog --no-push --no-git-tag-version --no-private",
"release:build": "lerna run --parallel --no-private --scope \"@mui/*\" build",
- "release:publish": "pnpm publish --recursive --tag latest",
- "release:publish:dry-run": "pnpm publish --recursive --tag latest --registry=\"http://localhost:4873/\"",
+ "release:publish": "pnpm publish --recursive --tag next",
+ "release:publish:dry-run": "pnpm publish --recursive --tag next --registry=\"http://localhost:4873/\"",
"release:tag": "node scripts/releaseTag.mjs",
"validate": "concurrently \"pnpm prettier && pnpm eslint\" \"pnpm proptypes\" \"pnpm docs:typescript:formatted\" \"pnpm docs:api\"",
"clean:node_modules": "rimraf --glob \"**/node_modules\""
@@ -71,33 +71,33 @@
"devDependencies": {
"@actions/core": "^1.11.1",
"@actions/github": "^6.0.0",
- "@argos-ci/core": "^2.9.0",
- "@babel/cli": "^7.25.7",
- "@babel/core": "^7.25.8",
- "@babel/node": "^7.25.7",
- "@babel/plugin-transform-class-properties": "^7.25.7",
- "@babel/plugin-transform-object-rest-spread": "^7.25.8",
- "@babel/plugin-transform-private-methods": "^7.25.7",
- "@babel/plugin-transform-private-property-in-object": "^7.25.8",
- "@babel/plugin-transform-react-constant-elements": "^7.25.7",
- "@babel/plugin-transform-runtime": "^7.25.7",
- "@babel/preset-env": "^7.25.8",
- "@babel/preset-react": "^7.25.7",
- "@babel/preset-typescript": "^7.25.7",
- "@babel/register": "^7.25.7",
- "@babel/traverse": "^7.25.7",
- "@babel/types": "^7.25.8",
+ "@argos-ci/core": "^2.10.0",
+ "@babel/cli": "^7.25.9",
+ "@babel/core": "^7.26.0",
+ "@babel/node": "^7.26.0",
+ "@babel/plugin-transform-class-properties": "^7.25.9",
+ "@babel/plugin-transform-object-rest-spread": "^7.25.9",
+ "@babel/plugin-transform-private-methods": "^7.25.9",
+ "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+ "@babel/plugin-transform-react-constant-elements": "^7.25.9",
+ "@babel/plugin-transform-runtime": "^7.25.9",
+ "@babel/preset-env": "^7.26.0",
+ "@babel/preset-react": "^7.25.9",
+ "@babel/preset-typescript": "^7.26.0",
+ "@babel/register": "^7.25.9",
+ "@babel/traverse": "^7.25.9",
+ "@babel/types": "^7.26.0",
"@emotion/cache": "^11.13.1",
"@emotion/react": "^11.13.3",
"@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.19",
+ "@mui/internal-test-utils": "^1.0.19",
"@mui/material": "^5.16.7",
- "@mui/monorepo": "github:mui/material-ui#010de4505361345951824d905d1508d6f258ba67",
+ "@mui/monorepo": "github:mui/material-ui#32112b76aa821c2a1e98120545019ef1a71ea274",
"@mui/utils": "^5.16.6",
- "@next/eslint-plugin-next": "14.2.15",
+ "@next/eslint-plugin-next": "15.0.2",
"@octokit/plugin-retry": "^7.1.2",
"@octokit/rest": "^21.0.2",
"@playwright/test": "^1.44.1",
@@ -106,10 +106,10 @@
"@types/chai": "^4.3.20",
"@types/chai-dom": "^1.11.3",
"@types/fs-extra": "^11.0.4",
- "@types/karma": "^6.3.8",
- "@types/lodash": "^4.17.10",
+ "@types/karma": "^6.3.9",
+ "@types/lodash": "^4.17.12",
"@types/mocha": "^10.0.9",
- "@types/node": "^20.16.11",
+ "@types/node": "^20.17.3",
"@types/react": "^18.3.4",
"@types/react-dom": "^18.3.0",
"@types/react-test-renderer": "^18.3.0",
@@ -119,7 +119,7 @@
"@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.18.0",
"autoprefixer": "^10.4.20",
- "axe-core": "4.10.0",
+ "axe-core": "4.10.2",
"babel-loader": "^9.2.1",
"babel-plugin-istanbul": "^7.0.0",
"babel-plugin-module-resolver": "^5.0.2",
@@ -144,21 +144,21 @@
"eslint-import-resolver-webpack": "^0.13.9",
"eslint-plugin-filenames": "^1.3.2",
"eslint-plugin-import": "^2.31.0",
- "eslint-plugin-jsdoc": "^50.4.1",
- "eslint-plugin-jsx-a11y": "^6.10.0",
+ "eslint-plugin-jsdoc": "^50.4.3",
+ "eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-material-ui": "workspace:^",
"eslint-plugin-mocha": "^10.5.0",
"eslint-plugin-prettier": "^5.2.1",
- "eslint-plugin-react": "^7.37.1",
+ "eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
"eslint-plugin-react-hooks": "^5.0.0",
- "eslint-plugin-testing-library": "^6.3.0",
+ "eslint-plugin-testing-library": "^6.4.0",
"fast-glob": "^3.3.2",
"format-util": "^1.0.5",
"fs-extra": "^11.2.0",
"glob-gitignore": "^1.0.15",
"globby": "^14.0.2",
- "html-webpack-plugin": "^5.6.0",
+ "html-webpack-plugin": "^5.6.3",
"jsdom": "24.1.3",
"jss": "^10.10.0",
"jss-plugin-template": "^10.10.0",
@@ -183,12 +183,12 @@
"react-dom": "^18.3.1",
"remark": "^15.0.1",
"rimraf": "^6.0.1",
- "serve": "^14.2.3",
+ "serve": "^14.2.4",
"sinon": "^18.0.1",
"stream-browserify": "^3.0.0",
"string-replace-loader": "^3.1.0",
"terser-webpack-plugin": "^5.3.10",
- "tsx": "^4.19.1",
+ "tsx": "^4.19.2",
"typescript": "^5.6.3",
"unist-util-visit": "^5.0.0",
"util": "^0.12.5",
@@ -199,11 +199,11 @@
},
"resolutions": {
"react-is": "^18.3.1",
- "@types/node": "^20.16.11"
+ "@types/node": "^20.17.3"
},
- "packageManager": "pnpm@9.12.1",
+ "packageManager": "pnpm@9.12.2",
"engines": {
- "pnpm": "9.12.1"
+ "pnpm": "9.12.2"
},
"pnpm": {
"patchedDependencies": {
diff --git a/packages/rsc-builder/package.json b/packages/rsc-builder/package.json
index 92d10aa52ebb8..934708ddd01dc 100644
--- a/packages/rsc-builder/package.json
+++ b/packages/rsc-builder/package.json
@@ -9,6 +9,6 @@
},
"devDependencies": {
"@types/mocha": "^10.0.9",
- "@types/node": "^20.16.11"
+ "@types/node": "^20.17.3"
}
}
diff --git a/packages/x-charts-pro/package.json b/packages/x-charts-pro/package.json
index 946258e4fc7c0..ae9cc81b1bdc3 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",
@@ -39,7 +39,7 @@
"directory": "packages/x-charts-pro"
},
"dependencies": {
- "@babel/runtime": "^7.25.7",
+ "@babel/runtime": "^7.26.0",
"@mui/utils": "^5.16.6 || ^6.0.0",
"@mui/x-charts": "workspace:*",
"@mui/x-charts-vendor": "workspace:*",
diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
index 0c3af2884f477..8424bfbb844ff 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