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/pie.md b/docs/data/charts/pie/pie.md index 047a4cc576e2..eda5601ffc78 100644 --- a/docs/data/charts/pie/pie.md +++ b/docs/data/charts/pie/pie.md @@ -110,7 +110,7 @@ const onItemClick = ( To skip animation at the creation and update of your chart you can use the `skipAnimation` prop. When set to `true` it skips animation powered by `@react-spring/web`. -Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important). +Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important). ```jsx // For a single component chart diff --git a/docs/data/charts/tooltip/CustomAxisTooltip.js b/docs/data/charts/tooltip/CustomAxisTooltip.js index bb893b9e83b1..c8b63c7f6cec 100644 --- a/docs/data/charts/tooltip/CustomAxisTooltip.js +++ b/docs/data/charts/tooltip/CustomAxisTooltip.js @@ -3,22 +3,80 @@ import NoSsr from '@mui/material/NoSsr'; import Popper from '@mui/material/Popper'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; -import { useAxisTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip'; +import { useAxisTooltip } from '@mui/x-charts/ChartsTooltip'; +import { useSvgRef } from '@mui/x-charts/hooks'; import { generateVirtualElement } from './generateVirtualElement'; +function usePointer() { + const svgRef = useSvgRef(); + const popperRef = React.useRef(null); + const virtualElement = React.useRef(generateVirtualElement({ 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) => { + virtualElement.current = generateVirtualElement({ + 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: virtualElement.current }; +} + 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 ( {
+ const svgRef = useSvgRef();
+ const popperRef: PopperProps['popperRef'] = React.useRef(null);
+ const virtualElement = React.useRef(generateVirtualElement({ 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) => {
+ virtualElement.current = generateVirtualElement({
+ 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: virtualElement.current };
+}
+
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 +93,8 @@ export function CustomAxisTooltip() {
}}
open
placement={isMousePointer ? 'top-end' : 'top'}
- anchorEl={generateVirtualElement(mousePosition)}
+ anchorEl={anchorEl}
+ popperRef={popperRef}
modifiers={[
{
name: 'offset',
@@ -81,7 +146,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 d1a08e3ff062..52040b1639af 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 d1a08e3ff062..52040b1639af 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 b70899fb38b4..13f56a2ebac8 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/server-side-data/ServerSideRowGroupingDataGrid.js b/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.js
new file mode 100644
index 000000000000..fc75932d136b
--- /dev/null
+++ b/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.js
@@ -0,0 +1,69 @@
+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 ServerSideRowGroupingDataGrid() {
+ 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', 'director'],
+ },
+ },
+ });
+
+ return (
+ {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 000000000000..621b74b052f4
--- /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 000000000000..7db1ea09c9c3
--- /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 49138cd42863..000000000000
--- 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 0bb9e399d3cb..000000000000
--- 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 b52029d14cde..000000000000
--- 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 d797406fa999..000000000000
--- 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 6db84b3f6c57..000000000000
--- 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 bcaf8043948f..000000000000
--- 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 (
-
);
diff --git a/docs/data/date-pickers/custom-field/MaterialV6Field.tsx b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx
index 35d4e0ca73ea..98a5d2d58c27 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 027cb7beacfa..9041ed886d8b 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 0c90908a7d4b..000000000000
--- 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 cd5ff731abbc..000000000000
--- 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 07ba449750d6..000000000000
--- 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 9708ed359729..000000000000
--- 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 82e06da7316b..d054e12c04de 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 17535291f5f3..a31c9c5bc351 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 @@
-,
+ extends UseDateFieldProps,
BaseSingleInputFieldProps<
Dayjs | null,
Dayjs,
FieldSection,
- false,
+ true,
DateValidationError
> {
/**
diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx
index aa09717fb29c..8acbab77d7c4 100644
--- a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx
+++ b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx
@@ -12,12 +12,12 @@ import {
} from '@mui/x-date-pickers/models';
interface ButtonFieldProps
- extends UseDateFieldProps,
+ extends UseDateFieldProps,
BaseSingleInputFieldProps<
Dayjs | null,
Dayjs,
FieldSection,
- false,
+ true,
DateValidationError
> {
setOpen?: React.Dispatch>;
diff --git a/docs/data/date-pickers/custom-field/custom-behavior/MaskedMaterialTextField.js b/docs/data/date-pickers/custom-field/custom-behavior/MaskedMaterialTextField.js
new file mode 100644
index 000000000000..0723d4565c51
--- /dev/null
+++ b/docs/data/date-pickers/custom-field/custom-behavior/MaskedMaterialTextField.js
@@ -0,0 +1,164 @@
+import * as React from 'react';
+import 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 } 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, format) {
+ if (value == null) {
+ return '';
+ }
+
+ return value.isValid() ? value.format(format) : '';
+}
+
+function MaskedField(props) {
+ 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) => {
+ 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) {
+ 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 (
+
+
+ );
+}
diff --git a/docs/data/date-pickers/custom-field/custom-behavior/MaskedMaterialTextField.tsx b/docs/data/date-pickers/custom-field/custom-behavior/MaskedMaterialTextField.tsx
new file mode 100644
index 000000000000..a589022eada6
--- /dev/null
+++ b/docs/data/date-pickers/custom-field/custom-behavior/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/custom-behavior/MaskedMaterialTextField.tsx.preview b/docs/data/date-pickers/custom-field/custom-behavior/MaskedMaterialTextField.tsx.preview
new file mode 100644
index 000000000000..1340a82dd55d
--- /dev/null
+++ b/docs/data/date-pickers/custom-field/custom-behavior/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;
diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md
index 4f5b5f782fb3..9c4cc5216bb3 100644
--- a/docs/data/date-pickers/custom-field/custom-field.md
+++ b/docs/data/date-pickers/custom-field/custom-field.md
@@ -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,55 +80,50 @@ 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}}
-
-{{"demo": "JoyV6MultiInputRangeField.js", "defaultCodeOpen": false}}
+## With another Design System
-### 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
-
-### Using the browser input
+{{"demo": "BrowserV7Field.js", "defaultCodeOpen": false}}
-{{"demo": "BrowserV6Field.js", "defaultCodeOpen": false}}
+{{"demo": "BrowserV7SingleInputRangeField.js", "defaultCodeOpen": false}}
-{{"demo": "BrowserV6SingleInputRangeField.js", "defaultCodeOpen": false}}
+{{"demo": "BrowserV7MultiInputRangeField.js", "defaultCodeOpen": false}}
-{{"demo": "BrowserV6MultiInputRangeField.js", "defaultCodeOpen": false}}
+### Using Joy UI
-:::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.
-:::
-
-### Using custom `PickersTextField`
+You can use the [Joy UI](https://mui.com/joy-ui/getting-started/) components instead of the Material UI ones:
-:::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": "JoyV6Field.js", "defaultCodeOpen": false}}
-{{"demo": "BrowserV7Field.js", "defaultCodeOpen": false}}
+{{"demo": "JoyV6SingleInputRangeField.js", "defaultCodeOpen": false}}
-{{"demo": "BrowserV7SingleInputRangeField.js", "defaultCodeOpen": false}}
+{{"demo": "JoyV6MultiInputRangeField.js", "defaultCodeOpen": false}}
-{{"demo": "BrowserV7MultiInputRangeField.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.
+:::
-## Usage with another UI
+## With a custom editing experience
### Using an `Autocomplete`
@@ -158,6 +132,12 @@ you can replace the field with an `Autocomplete` listing those dates:
{{"demo": "PickerWithAutocompleteField.js", "defaultCodeOpen": false}}
+### Using a masked Text Field
+
+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 a Text Field using a masked input value built with the [rifm](https://github.com/realadvisor/rifm) package.
+
+{{"demo": "custom-behavior/MaskedMaterialTextField.js", "defaultCodeOpen": false}}
+
### Using a read-only `TextField`
If you want users to select a value exclusively through the views
@@ -184,22 +164,22 @@ On the examples below, you can see that the typing of the props received by a cu
```tsx
interface JoyDateFieldProps
- extends UseDateFieldProps, // 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/fields/BasicV7DOMStructure.js b/docs/data/date-pickers/fields/BasicV7DOMStructure.js
index 1f32eca967da..62c0924c3c90 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 (
-
);
diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx
index 1f32eca967da..62c0924c3c90 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 f33bc6c8fdc7..2dc079345c09 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;
+ ```
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 2b1a932e33ff..3fc640a64832 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 7d979f8af087..2efbd13455fd 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 000000000000..c76698100726
--- /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 b952b8a5b722..361b46837c94 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[] = [
{
@@ -120,8 +120,9 @@ const pages: MuiPage[] = [
pathname: '/x/react-data-grid/server-side-data-group',
title: 'Server-side data',
plan: 'pro',
+ newFeature: true,
children: [
- { pathname: '/x/react-data-grid/server-side-data', title: 'Overview' },
+ { pathname: '/x/react-data-grid/server-side-data', title: 'Overview', plan: 'pro' },
{ pathname: '/x/react-data-grid/server-side-data/tree-data', plan: 'pro' },
{
pathname: '/x/react-data-grid/server-side-data/lazy-loading',
@@ -135,8 +136,7 @@ const pages: MuiPage[] = [
},
{
pathname: '/x/react-data-grid/server-side-data/row-grouping',
- plan: 'pro',
- planned: true,
+ plan: 'premium',
},
{
pathname: '/x/react-data-grid/server-side-data/aggregation',
@@ -537,9 +537,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 b1fc45bfc690..cc9c2306612b 100644
--- a/docs/data/tree-view/accessibility/accessibility.md
+++ b/docs/data/tree-view/accessibility/accessibility.md
@@ -54,7 +54,7 @@ Type-ahead is supported for single characters. When typing a character, focus mo
## Selection
-The tree view supports both single and multi-selection. To learn more about the selection API, visit the dedicated page for the [Simple Tree View](/x/react-tree-view/simple-tree-view/selection/) or the [Rich Tree View](/x/react-tree-view/rich-tree-view/selection/).
+The Tree View supports both single and multi-selection. To learn more about the selection API, visit the dedicated page for the [Simple Tree View](/x/react-tree-view/simple-tree-view/selection/) or the [Rich Tree View](/x/react-tree-view/rich-tree-view/selection/).
To read more about the distinction between selection and focus, you can refer to the [WAI-ARIA Authoring Practices guide](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_vs_selection).
diff --git a/docs/data/tree-view/datasets/employees.ts b/docs/data/tree-view/datasets/employees.ts
new file mode 100644
index 000000000000..2af62416f36e
--- /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 79dc191bdc92..6acc9e5382c1 100644
--- a/docs/data/tree-view/getting-started/getting-started.md
+++ b/docs/data/tree-view/getting-started/getting-started.md
@@ -72,7 +72,7 @@ Take a look at the [Styled engine guide](/material-ui/integrations/styled-compon
## Render your first component
-To make sure that everything is set up correctly, try rendering a `SimpleTreeView` component:
+To make sure that everything is set up correctly, try rendering a Simple Tree View component:
{{"demo": "FirstComponent.js"}}
@@ -82,7 +82,7 @@ To make sure that everything is set up correctly, try rendering a `SimpleTreeVie
The component follows the WAI-ARIA authoring practices.
-To have an accessible tree view you must use `aria-labelledby`
+To have an accessible Tree View you must use `aria-labelledby`
or `aria-label` to reference or provide a label on the TreeView,
otherwise, screen readers will announce it as "tree", making it hard to understand the context of a specific tree item.
diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md
index 64c374965652..e1c49a7e2bd6 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 6711c554ba9d..09291542de68 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 afb1f90aec17..5619fbf9b31d 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 f555c2afd64b..5f5a0434956b 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 c9f03403a38f..500411bd806c 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 e45bdbb4fb3c..000000000000
--- 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 6fa38db9c231..000000000000
--- 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 7dc64dbbe9b0..b12875731714 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 88d4d92db453..c2c669a25182 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 c6e201274016..b8af5dff4380 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 aceb02cb7215..c9f44a4e63ef 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 81245357631e..fe14e7b79ae3 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 b93e60f39e00..000000000000
--- 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 e2ec284be456..000000000000
--- 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 000000000000..f9683d989e7b
--- /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 000000000000..8e49e71df547
--- /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 086d8d6ff086..72886928944d 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 2ea3153a42ce..d03d53ca63d0 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 c46698f0ed3d..b503ea53e2c8 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 cfe7ab58704a..7c1d665c25d3 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",
@@ -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",
@@ -108,7 +109,7 @@
"@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 08a025daad50..8f1471a414c7 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/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
index 478f8854a196..ded5c1bd3c90 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.json
+++ b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -796,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 54a8ab54294e..42df3c139311 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.json
+++ b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -728,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 25e56f8402bc..9994e0dc6317 100644
--- a/docs/pages/x/api/data-grid/data-grid.json
+++ b/docs/pages/x/api/data-grid/data-grid.json
@@ -615,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 6d19c1df3ffc..09e234b76a5a 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 7cd100636eb8..79efa8560520 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 53335f98fc5e..83ada41f5bc5 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 b11fd2a21135..eeb2d1af8627 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 fd41a7bddc3e..030004edd155 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 1282d02797a6..bac6c64d7c20 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 2f46bb4dce94..000000000000
--- 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 d05d2ebba846..fdec6c899509 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 2d0a141601f0..1f4beb6a6746 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 0dc82b364e0f..27b6857feed5 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/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
index 5e463ec7b112..3b9442aa58e3 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
@@ -1230,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 b2b762362095..c1d26982ac46 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
@@ -1168,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 9cf3ea258f2a..d082ef5d495d 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 3a33b96c08bd..b43dd9784328 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
- 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;
/**
@@ -76,7 +76,7 @@ DefaultChartsLegend.propTypes = {
*/
direction: PropTypes.oneOf(['column', 'row']).isRequired,
/**
- * @deprecated Use the `useDrawingArea` hook instead.
+ * @deprecated Use the `useDrawingArea()` hook instead.
*/
drawingArea: PropTypes.shape({
bottom: PropTypes.number.isRequired,
diff --git a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
index 326f12ef6f4b..c4da5f03a666 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) {
diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
index 4566eddb96d6..51c770bbb827 100644
--- a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
+++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
@@ -11,11 +11,13 @@ import {
InteractionContext,
ItemInteractionData,
} from '../context/InteractionProvider';
+import { useSvgRef } from '../hooks/useSvgRef';
import {
generateVirtualElement,
- useMouseTracker,
getTooltipHasData,
TriggerOptions,
+ usePointerType,
+ VirtualElement,
} from './utils';
import { ChartSeriesType } from '../models/seriesType/config';
import { ChartsItemContentProps, ChartsItemTooltipContent } from './ChartsItemTooltipContent';
@@ -133,14 +135,22 @@ 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 virtualElement = React.useRef(null);
+ if (virtualElement.current === null) {
+ virtualElement.current = generateVirtualElement(null);
+ }
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 +160,14 @@ 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: virtualElement.current,
modifiers: [
{
name: 'offset',
options: {
- offset: [0, mousePosition?.pointerType === 'touch' ? 40 - mousePosition.height : 0],
+ offset: [0, pointerType?.pointerType === 'touch' ? 40 - pointerType.height : 0],
},
},
],
@@ -165,6 +175,26 @@ function ChartsTooltip(inProps: ChartsTooltipProps
ownerState: {},
});
+ React.useEffect(() => {
+ const element = svgRef.current;
+ if (element === null) {
+ return () => {};
+ }
+
+ const handleMove = (event: PointerEvent) => {
+ virtualElement.current = generateVirtualElement({
+ x: event.clientX,
+ y: event.clientY,
+ });
+ popperRef.current?.update();
+ };
+ element.addEventListener('pointermove', handleMove);
+
+ return () => {
+ element.removeEventListener('pointermove', handleMove);
+ };
+ }, [svgRef]);
+
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 6b4634241e3d..bde48ebc9f35 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/utils.tsx b/packages/x-charts/src/ChartsTooltip/utils.tsx
index 89faff2a7b17..24e2e2220391 100644
--- a/packages/x-charts/src/ChartsTooltip/utils.tsx
+++ b/packages/x-charts/src/ChartsTooltip/utils.tsx
@@ -10,8 +10,28 @@ type MousePosition = {
height: number;
};
-export function generateVirtualElement(mousePosition: MousePosition | null) {
- if (mousePosition === null) {
+export type VirtualElement = {
+ getBoundingClientRect: () => {
+ width: number;
+ height: number;
+ x: number;
+ y: number;
+ top: number;
+ right: number;
+ bottom: number;
+ left: number;
+ toJSON: () => string;
+ };
+};
+/**
+ * Generate a virtual element for the tooltip.
+ * Default to (0, 0) is the argument is not provided, or null.
+ * @param mousePosition { x: number, y: number}
+ */
+export function generateVirtualElement(
+ mousePosition?: Pick | null,
+): VirtualElement {
+ if (!mousePosition) {
return {
getBoundingClientRect: () => ({
width: 0,
@@ -47,6 +67,9 @@ export function generateVirtualElement(mousePosition: MousePosition | null) {
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 +82,8 @@ export function useMouseTracker(): UseMouseTrackerReturnValue {
return () => {};
}
+ const controller = new AbortController();
+
const handleOut = (event: PointerEvent) => {
if (event.pointerType !== 'mouse') {
setMousePosition(null);
@@ -74,18 +99,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-codemod/README.md b/packages/x-codemod/README.md
index 453f783b567d..af1290cabb81 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
Applies a `@mui/x-codemod` to the specified paths
@@ -29,8 +29,8 @@ Options:
--jscodeshift Pass options directly to jscodeshift [array]
Examples:
- npx @mui/x-codemod@latest v7.0.0/preset-safe src
- npx @mui/x-codemod@latest v6.0.0/component-rename-prop src --
+ npx @mui/x-codemod@next v7.0.0/preset-safe src
+ npx @mui/x-codemod@next v6.0.0/component-rename-prop src --
--component=DataGrid --from=prop --to=newProp
```
@@ -40,9 +40,9 @@ To pass more options directly to jscodeshift, use `--jscodeshift=...`. For examp
```bash
// single option
-npx @mui/x-codemod@latest --jscodeshift=--run-in-band
+npx @mui/x-codemod@next --jscodeshift=--run-in-band
// multiple options
-npx @mui/x-codemod@latest --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2
+npx @mui/x-codemod@next --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2
```
See all available options [here](https://github.com/facebook/jscodeshift#usage-cli).
@@ -53,7 +53,50 @@ Options to [recast](https://github.com/benjamn/recast)'s printer can be provided
through jscodeshift's `printOptions` command line argument
```bash
-npx @mui/x-codemod@latest --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
+npx @mui/x-codemod@next --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
+```
+
+## v8.0.0
+
+### 🚀 `preset-safe` for v8.0.0
+
+A combination of all important transformers for migrating v7 to v8.
+⚠️ This codemod should be run only once.
+It runs codemods for both Data Grid and Date and Time Pickers packages.
+To run codemods for a specific package, refer to the respective section.
+
+```bash
+npx @mui/x-codemod@latest v8.0.0/preset-safe
+```
+
+The corresponding sub-sections are listed below
+
+- [`preset-safe-for-tree-view`](#preset-safe-for-tree-view-v800)
+
+### Tree View codemods
+
+#### `preset-safe` for tree view v8.0.0
+
+The `preset-safe` codemods for tree view.
+
+```bash
+npx @mui/x-codemod@latest v8.0.0/tree-view/preset-safe
+```
+
+The list includes these transformers
+
+- [`rename-tree-item-2`](#rename-tree-item-2)
+
+#### `rename-tree-item-2`
+
+Renames the `TreeItem2` component to `TreeItem` (same for any subcomponents or utils like `useTreeItem2` or `TreeItem2Icon`).
+
+```diff
+-import { TreeItem2 } from '@mui/x-tree-view';
++import { TreeItem } from '@mui/x-tree-view';
+
+-import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
++import { TreeItem } from '@mui/x-tree-view/TreeItem';
```
## v7.0.0
@@ -227,9 +270,9 @@ npx @mui/x-codemod@latest v7.0.0/data-grid/remove-stabilized-experimentalFeature
### Tree View codemods
-#### `preset-safe` for tree view v7.0.0
+#### `preset-safe` for Tree View v7.0.0
-The `preset-safe` codemods for tree view.
+The `preset-safe` codemods for Tree View.
```bash
npx @mui/x-codemod@latest v7.0.0/tree-view/preset-safe
@@ -247,7 +290,7 @@ The list includes these transformers
#### `rename-tree-view-simple-tree-view`
-Renames the `TreeView` component to `SimpleTreeView`
+Renames the Tree View component to Simple Tree View
```diff
-import { TreeView } from '@mui/x-tree-view';
diff --git a/packages/x-codemod/package.json b/packages/x-codemod/package.json
index 4f9a0b5687a4..c9a7f1934e1d 100644
--- a/packages/x-codemod/package.json
+++ b/packages/x-codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-codemod",
- "version": "7.20.0",
+ "version": "7.21.0",
"bin": "./codemod.js",
"private": false,
"author": "MUI Team",
diff --git a/packages/x-codemod/src/v8.0.0/preset-safe/actual.spec.js b/packages/x-codemod/src/v8.0.0/preset-safe/actual.spec.js
new file mode 100644
index 000000000000..b7a570e98bff
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/preset-safe/actual.spec.js
@@ -0,0 +1,13 @@
+// @ts-nocheck
+import * as React from 'react';
+import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+
+const className = treeViewClasses.root;
+
+// prettier-ignore
+
+
+
+
diff --git a/packages/x-codemod/src/v8.0.0/preset-safe/expected.spec.js b/packages/x-codemod/src/v8.0.0/preset-safe/expected.spec.js
new file mode 100644
index 000000000000..b3252ca7f64b
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/preset-safe/expected.spec.js
@@ -0,0 +1,13 @@
+// @ts-nocheck
+import * as React from 'react';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+
+const className = treeViewClasses.root;
+
+// prettier-ignore
+
+
+
+
diff --git a/packages/x-codemod/src/v8.0.0/preset-safe/index.ts b/packages/x-codemod/src/v8.0.0/preset-safe/index.ts
new file mode 100644
index 000000000000..306d3446813d
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/preset-safe/index.ts
@@ -0,0 +1,8 @@
+import transformTreeView from '../tree-view/preset-safe';
+import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../types';
+
+export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
+ file.source = transformTreeView(file, api, options);
+
+ return file.source;
+}
diff --git a/packages/x-codemod/src/v8.0.0/preset-safe/preset-safe.test.ts b/packages/x-codemod/src/v8.0.0/preset-safe/preset-safe.test.ts
new file mode 100644
index 000000000000..b0ea5e858c7a
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/preset-safe/preset-safe.test.ts
@@ -0,0 +1,27 @@
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from '.';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+ return readFile(path.join(__dirname, fileName));
+}
+
+describe('v8.0.0', () => {
+ describe('preset-safe', () => {
+ it('transforms code as needed', () => {
+ const actual = transform({ source: read('./actual.spec.js') }, { jscodeshift }, {});
+
+ const expected = read('./expected.spec.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = transform({ source: read('./expected.spec.js') }, { jscodeshift }, {});
+
+ const expected = read('./expected.spec.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+});
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/actual.spec.tsx b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/actual.spec.tsx
new file mode 100644
index 000000000000..4b5b1a751562
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/actual.spec.tsx
@@ -0,0 +1,11 @@
+// @ts-nocheck
+import * as React from 'react';
+import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+
+const className = treeViewClasses.root;
+
+// prettier-ignore
+
+ ;
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/expected.spec.tsx b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/expected.spec.tsx
new file mode 100644
index 000000000000..4a5aa4e135b9
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/expected.spec.tsx
@@ -0,0 +1,11 @@
+// @ts-nocheck
+import * as React from 'react';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+
+const className = treeViewClasses.root;
+
+// prettier-ignore
+
+ ;
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/index.ts b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/index.ts
new file mode 100644
index 000000000000..d94e0b16c030
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/index.ts
@@ -0,0 +1,9 @@
+import transformRenameTreeItem2 from '../rename-tree-item-2';
+
+import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
+
+export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
+ file.source = transformRenameTreeItem2(file, api, options);
+
+ return file.source;
+}
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/preset-safe.test.ts b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/preset-safe.test.ts
new file mode 100644
index 000000000000..7f61d9c0e721
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/preset-safe.test.ts
@@ -0,0 +1,41 @@
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from './index';
+import readFile from '../../../util/readFile';
+
+function read(fileName) {
+ return readFile(path.join(__dirname, fileName));
+}
+
+describe('v8.0.0/tree-view', () => {
+ describe('preset-safe', () => {
+ it('transforms code as needed', () => {
+ const actual = transform(
+ {
+ source: read('./actual.spec.tsx'),
+ path: require.resolve('./actual.spec.tsx'),
+ },
+ { jscodeshift: jscodeshift.withParser('tsx') },
+ {},
+ );
+
+ const expected = read('./expected.spec.tsx');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent for expression', () => {
+ const actual = transform(
+ {
+ source: read('./expected.spec.tsx'),
+ path: require.resolve('./expected.spec.tsx'),
+ },
+ { jscodeshift: jscodeshift.withParser('tsx') },
+ {},
+ );
+
+ const expected = read('./expected.spec.tsx');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+});
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/actual-community-nested-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/actual-community-nested-imports.spec.tsx
new file mode 100644
index 000000000000..48001cc74bf5
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/actual-community-nested-imports.spec.tsx
@@ -0,0 +1,94 @@
+// @ts-nocheck
+import * as React from 'react';
+import {
+ TreeItem2,
+ TreeItem2Root,
+ TreeItem2Content,
+ TreeItem2IconContainer,
+ TreeItem2GroupTransition,
+ TreeItem2Checkbox,
+ TreeItem2Label,
+ TreeItem2Props,
+ TreeItem2Slots,
+ TreeItem2SlotProps,
+} from '@mui/x-tree-view/TreeItem2';
+import {
+ useTreeItem2,
+ unstable_useTreeItem2 as useAliasedTreeItem,
+ UseTreeItem2Parameters,
+ UseTreeItem2ReturnValue,
+ UseTreeItem2Status,
+ UseTreeItem2RootSlotOwnProps,
+ UseTreeItem2ContentSlotOwnProps,
+ UseTreeItem2LabelInputSlotOwnProps,
+ UseTreeItem2LabelSlotOwnProps,
+ UseTreeItem2CheckboxSlotOwnProps,
+ UseTreeItem2IconContainerSlotOwnProps,
+ UseTreeItem2GroupTransitionSlotOwnProps,
+ UseTreeItem2DragAndDropOverlaySlotOwnProps,
+} from '@mui/x-tree-view/useTreeItem2';
+import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
+import {
+ TreeItem2Provider,
+ TreeItem2ProviderProps,
+ FakeImportToForcePrettierNewLine,
+} from '@mui/x-tree-view/TreeItem2Provider';
+import {
+ TreeItem2Icon,
+ TreeItem2IconProps,
+ TreeItem2IconSlots,
+ TreeItem2IconSlotProps,
+} from '@mui/x-tree-view/TreeItem2Icon';
+import {
+ TreeItem2DragAndDropOverlay,
+ TreeItem2DragAndDropOverlayProps,
+} from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
+import {
+ TreeItem2LabelInput,
+ TreeItem2LabelInputProps,
+ FakeImport2ToForcePrettierNewLine,
+} from '@mui/x-tree-view/TreeItem2LabelInput';
+
+// prettier-ignore
+function App() {
+ useTreeItem2({});
+ useAliasedTreeItem({});
+ useTreeItem2Utils();
+
+ const treeItemProps: TreeItem2Props = {};
+ const treeItemSlots: TreeItem2Slots = {};
+ const treeItemSlotProps: TreeItem2SlotProps = {};
+
+ const params: UseTreeItem2Parameters = {};
+ const returnValue: UseTreeItem2ReturnValue = {};
+ const status: UseTreeItem2Status = {};
+ const root: UseTreeItem2RootSlotOwnProps = {};
+ const content: UseTreeItem2ContentSlotOwnProps = {};
+ const labelInput: UseTreeItem2LabelInputSlotOwnProps = {};
+ const label: UseTreeItem2LabelSlotOwnProps = {};
+ const checkbox: UseTreeItem2CheckboxSlotOwnProps = {};
+ const iconContainer: UseTreeItem2IconContainerSlotOwnProps = {};
+ const groupTransition: UseTreeItem2GroupTransitionSlotOwnProps = {};
+ const dragAndDropOverlay: UseTreeItem2DragAndDropOverlaySlotOwnProps = {};
+
+ const treeItemProviderProps: TreeItem2ProviderProps = {};
+ const treeItemIconProps: TreeItem2IconProps = {};
+ const treeItemDragAndDropOverlayProps: TreeItem2DragAndDropOverlayProps = {};
+ const treeItemLabelInputProps: TreeItem2LabelInputProps = {};
+
+ return (
+
+
+ );
+}
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/actual-community-root-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/actual-community-root-imports.spec.tsx
new file mode 100644
index 000000000000..9b5484ad5f45
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/actual-community-root-imports.spec.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable no-restricted-imports */
+// @ts-nocheck
+import * as React from 'react';
+import {
+ TreeItem2,
+ TreeItem2Root,
+ TreeItem2Content,
+ TreeItem2IconContainer,
+ TreeItem2GroupTransition,
+ TreeItem2Checkbox,
+ TreeItem2Label,
+ TreeItem2Props,
+ TreeItem2Slots,
+ TreeItem2SlotProps,
+ useTreeItem2,
+ unstable_useTreeItem2 as useAliasedTreeItem,
+ UseTreeItem2Parameters,
+ UseTreeItem2ReturnValue,
+ UseTreeItem2Status,
+ UseTreeItem2RootSlotOwnProps,
+ UseTreeItem2ContentSlotOwnProps,
+ UseTreeItem2LabelInputSlotOwnProps,
+ UseTreeItem2LabelSlotOwnProps,
+ UseTreeItem2CheckboxSlotOwnProps,
+ UseTreeItem2IconContainerSlotOwnProps,
+ UseTreeItem2GroupTransitionSlotOwnProps,
+ UseTreeItem2DragAndDropOverlaySlotOwnProps,
+ useTreeItem2Utils,
+ TreeItem2Provider,
+ TreeItem2ProviderProps,
+ TreeItem2Icon,
+ TreeItem2IconProps,
+ TreeItem2IconSlots,
+ TreeItem2IconSlotProps,
+ TreeItem2DragAndDropOverlay,
+ TreeItem2DragAndDropOverlayProps,
+ TreeItem2LabelInput,
+ TreeItem2LabelInputProps,
+} from '@mui/x-tree-view';
+
+// prettier-ignore
+function App() {
+ useTreeItem2({});
+ useAliasedTreeItem({});
+ useTreeItem2Utils();
+
+ const treeItemProps: TreeItem2Props = {};
+ const treeItemSlots: TreeItem2Slots = {};
+ const treeItemSlotProps: TreeItem2SlotProps = {};
+
+ const params: UseTreeItem2Parameters = {};
+ const returnValue: UseTreeItem2ReturnValue = {};
+ const status: UseTreeItem2Status = {};
+ const root: UseTreeItem2RootSlotOwnProps = {};
+ const content: UseTreeItem2ContentSlotOwnProps = {};
+ const labelInput: UseTreeItem2LabelInputSlotOwnProps = {};
+ const label: UseTreeItem2LabelSlotOwnProps = {};
+ const checkbox: UseTreeItem2CheckboxSlotOwnProps = {};
+ const iconContainer: UseTreeItem2IconContainerSlotOwnProps = {};
+ const groupTransition: UseTreeItem2GroupTransitionSlotOwnProps = {};
+ const dragAndDropOverlay: UseTreeItem2DragAndDropOverlaySlotOwnProps = {};
+
+ const treeItemProviderProps: TreeItem2ProviderProps = {};
+ const treeItemIconProps: TreeItem2IconProps = {};
+ const treeItemDragAndDropOverlayProps: TreeItem2DragAndDropOverlayProps = {};
+ const treeItemLabelInputProps: TreeItem2LabelInputProps = {};
+
+ return (
+
+
+ );
+}
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/actual-pro-root-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/actual-pro-root-imports.spec.tsx
new file mode 100644
index 000000000000..46275e564461
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/actual-pro-root-imports.spec.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable no-restricted-imports */
+// @ts-nocheck
+import * as React from 'react';
+import {
+ TreeItem2,
+ TreeItem2Root,
+ TreeItem2Content,
+ TreeItem2IconContainer,
+ TreeItem2GroupTransition,
+ TreeItem2Checkbox,
+ TreeItem2Label,
+ TreeItem2Props,
+ TreeItem2Slots,
+ TreeItem2SlotProps,
+ useTreeItem2,
+ unstable_useTreeItem2 as useAliasedTreeItem,
+ UseTreeItem2Parameters,
+ UseTreeItem2ReturnValue,
+ UseTreeItem2Status,
+ UseTreeItem2RootSlotOwnProps,
+ UseTreeItem2ContentSlotOwnProps,
+ UseTreeItem2LabelInputSlotOwnProps,
+ UseTreeItem2LabelSlotOwnProps,
+ UseTreeItem2CheckboxSlotOwnProps,
+ UseTreeItem2IconContainerSlotOwnProps,
+ UseTreeItem2GroupTransitionSlotOwnProps,
+ UseTreeItem2DragAndDropOverlaySlotOwnProps,
+ useTreeItem2Utils,
+ TreeItem2Provider,
+ TreeItem2ProviderProps,
+ TreeItem2Icon,
+ TreeItem2IconProps,
+ TreeItem2IconSlots,
+ TreeItem2IconSlotProps,
+ TreeItem2DragAndDropOverlay,
+ TreeItem2DragAndDropOverlayProps,
+ TreeItem2LabelInput,
+ TreeItem2LabelInputProps,
+} from '@mui/x-tree-view-pro';
+
+// prettier-ignore
+function App() {
+ useTreeItem2({});
+ useAliasedTreeItem({});
+ useTreeItem2Utils();
+
+ const treeItemProps: TreeItem2Props = {};
+ const treeItemSlots: TreeItem2Slots = {};
+ const treeItemSlotProps: TreeItem2SlotProps = {};
+
+ const params: UseTreeItem2Parameters = {};
+ const returnValue: UseTreeItem2ReturnValue = {};
+ const status: UseTreeItem2Status = {};
+ const root: UseTreeItem2RootSlotOwnProps = {};
+ const content: UseTreeItem2ContentSlotOwnProps = {};
+ const labelInput: UseTreeItem2LabelInputSlotOwnProps = {};
+ const label: UseTreeItem2LabelSlotOwnProps = {};
+ const checkbox: UseTreeItem2CheckboxSlotOwnProps = {};
+ const iconContainer: UseTreeItem2IconContainerSlotOwnProps = {};
+ const groupTransition: UseTreeItem2GroupTransitionSlotOwnProps = {};
+ const dragAndDropOverlay: UseTreeItem2DragAndDropOverlaySlotOwnProps = {};
+
+ const treeItemProviderProps: TreeItem2ProviderProps = {};
+ const treeItemIconProps: TreeItem2IconProps = {};
+ const treeItemDragAndDropOverlayProps: TreeItem2DragAndDropOverlayProps = {};
+ const treeItemLabelInputProps: TreeItem2LabelInputProps = {};
+
+ return (
+
+
+ );
+}
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/expected-community-nested-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/expected-community-nested-imports.spec.tsx
new file mode 100644
index 000000000000..b3f4a9d62063
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/expected-community-nested-imports.spec.tsx
@@ -0,0 +1,94 @@
+// @ts-nocheck
+import * as React from 'react';
+import {
+ TreeItem,
+ TreeItemRoot,
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemGroupTransition,
+ TreeItemCheckbox,
+ TreeItemLabel,
+ TreeItemProps,
+ TreeItemSlots,
+ TreeItemSlotProps,
+} from '@mui/x-tree-view/TreeItem';
+import {
+ useTreeItem,
+ useTreeItem as useAliasedTreeItem,
+ UseTreeItemParameters,
+ UseTreeItemReturnValue,
+ UseTreeItemStatus,
+ UseTreeItemRootSlotOwnProps,
+ UseTreeItemContentSlotOwnProps,
+ UseTreeItemLabelInputSlotOwnProps,
+ UseTreeItemLabelSlotOwnProps,
+ UseTreeItemCheckboxSlotOwnProps,
+ UseTreeItemIconContainerSlotOwnProps,
+ UseTreeItemGroupTransitionSlotOwnProps,
+ UseTreeItemDragAndDropOverlaySlotOwnProps,
+} from '@mui/x-tree-view/useTreeItem';
+import { useTreeItemUtils } from '@mui/x-tree-view/hooks';
+import {
+ TreeItemProvider,
+ TreeItemProviderProps,
+ FakeImportToForcePrettierNewLine,
+} from '@mui/x-tree-view/TreeItemProvider';
+import {
+ TreeItemIcon,
+ TreeItemIconProps,
+ TreeItemIconSlots,
+ TreeItemIconSlotProps,
+} from '@mui/x-tree-view/TreeItemIcon';
+import {
+ TreeItemDragAndDropOverlay,
+ TreeItemDragAndDropOverlayProps,
+} from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
+import {
+ TreeItemLabelInput,
+ TreeItemLabelInputProps,
+ FakeImport2ToForcePrettierNewLine,
+} from '@mui/x-tree-view/TreeItemLabelInput';
+
+// prettier-ignore
+function App() {
+ useTreeItem({});
+ useAliasedTreeItem({});
+ useTreeItemUtils();
+
+ const treeItemProps: TreeItemProps = {};
+ const treeItemSlots: TreeItemSlots = {};
+ const treeItemSlotProps: TreeItemSlotProps = {};
+
+ const params: UseTreeItemParameters = {};
+ const returnValue: UseTreeItemReturnValue = {};
+ const status: UseTreeItemStatus = {};
+ const root: UseTreeItemRootSlotOwnProps = {};
+ const content: UseTreeItemContentSlotOwnProps = {};
+ const labelInput: UseTreeItemLabelInputSlotOwnProps = {};
+ const label: UseTreeItemLabelSlotOwnProps = {};
+ const checkbox: UseTreeItemCheckboxSlotOwnProps = {};
+ const iconContainer: UseTreeItemIconContainerSlotOwnProps = {};
+ const groupTransition: UseTreeItemGroupTransitionSlotOwnProps = {};
+ const dragAndDropOverlay: UseTreeItemDragAndDropOverlaySlotOwnProps = {};
+
+ const treeItemProviderProps: TreeItemProviderProps = {};
+ const treeItemIconProps: TreeItemIconProps = {};
+ const treeItemDragAndDropOverlayProps: TreeItemDragAndDropOverlayProps = {};
+ const treeItemLabelInputProps: TreeItemLabelInputProps = {};
+
+ return (
+ (
+ )
+ );
+}
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/expected-community-root-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/expected-community-root-imports.spec.tsx
new file mode 100644
index 000000000000..864d5e1a5c40
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/expected-community-root-imports.spec.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable no-restricted-imports */
+// @ts-nocheck
+import * as React from 'react';
+import {
+ TreeItem,
+ TreeItemRoot,
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemGroupTransition,
+ TreeItemCheckbox,
+ TreeItemLabel,
+ TreeItemProps,
+ TreeItemSlots,
+ TreeItemSlotProps,
+ useTreeItem,
+ useTreeItem as useAliasedTreeItem,
+ UseTreeItemParameters,
+ UseTreeItemReturnValue,
+ UseTreeItemStatus,
+ UseTreeItemRootSlotOwnProps,
+ UseTreeItemContentSlotOwnProps,
+ UseTreeItemLabelInputSlotOwnProps,
+ UseTreeItemLabelSlotOwnProps,
+ UseTreeItemCheckboxSlotOwnProps,
+ UseTreeItemIconContainerSlotOwnProps,
+ UseTreeItemGroupTransitionSlotOwnProps,
+ UseTreeItemDragAndDropOverlaySlotOwnProps,
+ useTreeItemUtils,
+ TreeItemProvider,
+ TreeItemProviderProps,
+ TreeItemIcon,
+ TreeItemIconProps,
+ TreeItemIconSlots,
+ TreeItemIconSlotProps,
+ TreeItemDragAndDropOverlay,
+ TreeItemDragAndDropOverlayProps,
+ TreeItemLabelInput,
+ TreeItemLabelInputProps,
+} from '@mui/x-tree-view';
+
+// prettier-ignore
+function App() {
+ useTreeItem({});
+ useAliasedTreeItem({});
+ useTreeItemUtils();
+
+ const treeItemProps: TreeItemProps = {};
+ const treeItemSlots: TreeItemSlots = {};
+ const treeItemSlotProps: TreeItemSlotProps = {};
+
+ const params: UseTreeItemParameters = {};
+ const returnValue: UseTreeItemReturnValue = {};
+ const status: UseTreeItemStatus = {};
+ const root: UseTreeItemRootSlotOwnProps = {};
+ const content: UseTreeItemContentSlotOwnProps = {};
+ const labelInput: UseTreeItemLabelInputSlotOwnProps = {};
+ const label: UseTreeItemLabelSlotOwnProps = {};
+ const checkbox: UseTreeItemCheckboxSlotOwnProps = {};
+ const iconContainer: UseTreeItemIconContainerSlotOwnProps = {};
+ const groupTransition: UseTreeItemGroupTransitionSlotOwnProps = {};
+ const dragAndDropOverlay: UseTreeItemDragAndDropOverlaySlotOwnProps = {};
+
+ const treeItemProviderProps: TreeItemProviderProps = {};
+ const treeItemIconProps: TreeItemIconProps = {};
+ const treeItemDragAndDropOverlayProps: TreeItemDragAndDropOverlayProps = {};
+ const treeItemLabelInputProps: TreeItemLabelInputProps = {};
+
+ return (
+ (
+ )
+ );
+}
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/expected-pro-root-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/expected-pro-root-imports.spec.tsx
new file mode 100644
index 000000000000..a05a8d97ba11
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/expected-pro-root-imports.spec.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable no-restricted-imports */
+// @ts-nocheck
+import * as React from 'react';
+import {
+ TreeItem,
+ TreeItemRoot,
+ TreeItemContent,
+ TreeItemIconContainer,
+ TreeItemGroupTransition,
+ TreeItemCheckbox,
+ TreeItemLabel,
+ TreeItemProps,
+ TreeItemSlots,
+ TreeItemSlotProps,
+ useTreeItem,
+ useTreeItem as useAliasedTreeItem,
+ UseTreeItemParameters,
+ UseTreeItemReturnValue,
+ UseTreeItemStatus,
+ UseTreeItemRootSlotOwnProps,
+ UseTreeItemContentSlotOwnProps,
+ UseTreeItemLabelInputSlotOwnProps,
+ UseTreeItemLabelSlotOwnProps,
+ UseTreeItemCheckboxSlotOwnProps,
+ UseTreeItemIconContainerSlotOwnProps,
+ UseTreeItemGroupTransitionSlotOwnProps,
+ UseTreeItemDragAndDropOverlaySlotOwnProps,
+ useTreeItemUtils,
+ TreeItemProvider,
+ TreeItemProviderProps,
+ TreeItemIcon,
+ TreeItemIconProps,
+ TreeItemIconSlots,
+ TreeItemIconSlotProps,
+ TreeItemDragAndDropOverlay,
+ TreeItemDragAndDropOverlayProps,
+ TreeItemLabelInput,
+ TreeItemLabelInputProps,
+} from '@mui/x-tree-view-pro';
+
+// prettier-ignore
+function App() {
+ useTreeItem({});
+ useAliasedTreeItem({});
+ useTreeItemUtils();
+
+ const treeItemProps: TreeItemProps = {};
+ const treeItemSlots: TreeItemSlots = {};
+ const treeItemSlotProps: TreeItemSlotProps = {};
+
+ const params: UseTreeItemParameters = {};
+ const returnValue: UseTreeItemReturnValue = {};
+ const status: UseTreeItemStatus = {};
+ const root: UseTreeItemRootSlotOwnProps = {};
+ const content: UseTreeItemContentSlotOwnProps = {};
+ const labelInput: UseTreeItemLabelInputSlotOwnProps = {};
+ const label: UseTreeItemLabelSlotOwnProps = {};
+ const checkbox: UseTreeItemCheckboxSlotOwnProps = {};
+ const iconContainer: UseTreeItemIconContainerSlotOwnProps = {};
+ const groupTransition: UseTreeItemGroupTransitionSlotOwnProps = {};
+ const dragAndDropOverlay: UseTreeItemDragAndDropOverlaySlotOwnProps = {};
+
+ const treeItemProviderProps: TreeItemProviderProps = {};
+ const treeItemIconProps: TreeItemIconProps = {};
+ const treeItemDragAndDropOverlayProps: TreeItemDragAndDropOverlayProps = {};
+ const treeItemLabelInputProps: TreeItemLabelInputProps = {};
+
+ return (
+ (
+ )
+ );
+}
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/index.ts b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/index.ts
new file mode 100644
index 000000000000..fcc1d0b10b12
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/index.ts
@@ -0,0 +1,98 @@
+import type { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
+import { renameImports } from '../../../util/renameImports';
+
+export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
+ const j = api.jscodeshift;
+ const root = j(file.source);
+
+ const printOptions = options.printOptions || {
+ quote: 'single',
+ trailingComma: true,
+ wrapColumn: 40,
+ };
+
+ renameImports({
+ j,
+ root,
+ packageNames: ['@mui/x-tree-view', '@mui/x-tree-view-pro'],
+ imports: [
+ {
+ oldEndpoint: 'TreeItem2',
+ newEndpoint: 'TreeItem',
+ importsMapping: {
+ TreeItem2: 'TreeItem',
+ TreeItem2Root: 'TreeItemRoot',
+ TreeItem2Content: 'TreeItemContent',
+ TreeItem2IconContainer: 'TreeItemIconContainer',
+ TreeItem2GroupTransition: 'TreeItemGroupTransition',
+ TreeItem2Checkbox: 'TreeItemCheckbox',
+ TreeItem2Label: 'TreeItemLabel',
+ TreeItem2Props: 'TreeItemProps',
+ TreeItem2Slots: 'TreeItemSlots',
+ TreeItem2SlotProps: 'TreeItemSlotProps',
+ },
+ },
+ {
+ oldEndpoint: 'useTreeItem2',
+ newEndpoint: 'useTreeItem',
+ importsMapping: {
+ useTreeItem2: 'useTreeItem',
+ unstable_useTreeItem2: 'useTreeItem',
+ UseTreeItem2Parameters: 'UseTreeItemParameters',
+ UseTreeItem2ReturnValue: 'UseTreeItemReturnValue',
+ UseTreeItem2Status: 'UseTreeItemStatus',
+ UseTreeItem2RootSlotOwnProps: 'UseTreeItemRootSlotOwnProps',
+ UseTreeItem2ContentSlotOwnProps: 'UseTreeItemContentSlotOwnProps',
+ UseTreeItem2LabelInputSlotOwnProps: 'UseTreeItemLabelInputSlotOwnProps',
+ UseTreeItem2LabelSlotOwnProps: 'UseTreeItemLabelSlotOwnProps',
+ UseTreeItem2CheckboxSlotOwnProps: 'UseTreeItemCheckboxSlotOwnProps',
+ UseTreeItem2IconContainerSlotOwnProps: 'UseTreeItemIconContainerSlotOwnProps',
+ UseTreeItem2GroupTransitionSlotOwnProps: 'UseTreeItemGroupTransitionSlotOwnProps',
+ UseTreeItem2DragAndDropOverlaySlotOwnProps: 'UseTreeItemDragAndDropOverlaySlotOwnProps',
+ },
+ },
+ {
+ oldEndpoint: 'TreeItem2Provider',
+ newEndpoint: 'TreeItemProvider',
+ importsMapping: {
+ TreeItem2Provider: 'TreeItemProvider',
+ TreeItem2ProviderProps: 'TreeItemProviderProps',
+ },
+ },
+ {
+ oldEndpoint: 'TreeItem2Icon',
+ newEndpoint: 'TreeItemIcon',
+ importsMapping: {
+ TreeItem2Icon: 'TreeItemIcon',
+ TreeItem2IconProps: 'TreeItemIconProps',
+ TreeItem2IconSlots: 'TreeItemIconSlots',
+ TreeItem2IconSlotProps: 'TreeItemIconSlotProps',
+ },
+ },
+ {
+ oldEndpoint: 'TreeItem2DragAndDropOverlay',
+ newEndpoint: 'TreeItemDragAndDropOverlay',
+ importsMapping: {
+ TreeItem2DragAndDropOverlay: 'TreeItemDragAndDropOverlay',
+ TreeItem2DragAndDropOverlayProps: 'TreeItemDragAndDropOverlayProps',
+ },
+ },
+ {
+ oldEndpoint: 'TreeItem2LabelInput',
+ newEndpoint: 'TreeItemLabelInput',
+ importsMapping: {
+ TreeItem2LabelInput: 'TreeItemLabelInput',
+ TreeItem2LabelInputProps: 'TreeItemLabelInputProps',
+ },
+ },
+ {
+ oldEndpoint: 'hooks',
+ importsMapping: {
+ useTreeItem2Utils: 'useTreeItemUtils',
+ },
+ },
+ ],
+ });
+
+ return root.toSource(printOptions);
+}
diff --git a/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/rename-tree-item-2.test.ts b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/rename-tree-item-2.test.ts
new file mode 100644
index 000000000000..d91b9e1456b5
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-item-2/rename-tree-item-2.test.ts
@@ -0,0 +1,44 @@
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from '.';
+import readFile from '../../../util/readFile';
+
+function read(fileName) {
+ return readFile(path.join(__dirname, fileName));
+}
+
+const TEST_FILES = ['community-nested-imports', 'community-root-imports', 'pro-root-imports'];
+
+describe('v7.0.0/tree-view', () => {
+ describe('rename-tree-item-2', () => {
+ TEST_FILES.forEach((testFile) => {
+ const actualPath = `./actual-${testFile}.spec.tsx`;
+ const expectedPath = `./expected-${testFile}.spec.tsx`;
+
+ describe(`${testFile.replace(/-/g, ' ')}`, () => {
+ it('transforms imports as needed', () => {
+ const actual = transform(
+ { source: read(actualPath) },
+ { jscodeshift: jscodeshift.withParser('tsx') },
+ {},
+ );
+
+ const expected = read(expectedPath);
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = transform(
+ { source: read(expectedPath) },
+ { jscodeshift: jscodeshift.withParser('tsx') },
+ {},
+ );
+
+ const expected = read(expectedPath);
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+ });
+ });
+});
diff --git a/packages/x-data-grid-generator/package.json b/packages/x-data-grid-generator/package.json
index cf21b769479f..a9b08defc290 100644
--- a/packages/x-data-grid-generator/package.json
+++ b/packages/x-data-grid-generator/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-data-grid-generator",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "Generate fake data for demo purposes only.",
"author": "MUI Team",
"main": "src/index.ts",
diff --git a/packages/x-data-grid-generator/src/hooks/index.ts b/packages/x-data-grid-generator/src/hooks/index.ts
index 84dd7368aea4..223d6170c94b 100644
--- a/packages/x-data-grid-generator/src/hooks/index.ts
+++ b/packages/x-data-grid-generator/src/hooks/index.ts
@@ -1,6 +1,7 @@
export * from './useDemoData';
export * from './useBasicDemoData';
-export * from './useMovieData';
+export { useMovieData } from './useMovieData';
+export type { Movie } from './useMovieData';
export * from './useQuery';
export * from './useMockServer';
export { loadServerRows } from './serverUtils';
diff --git a/packages/x-data-grid-generator/src/hooks/serverUtils.ts b/packages/x-data-grid-generator/src/hooks/serverUtils.ts
index 095893126643..80651b133af5 100644
--- a/packages/x-data-grid-generator/src/hooks/serverUtils.ts
+++ b/packages/x-data-grid-generator/src/hooks/serverUtils.ts
@@ -10,7 +10,6 @@ import {
GridValidRowModel,
} from '@mui/x-data-grid-pro';
import { GridStateColDef } from '@mui/x-data-grid-pro/internals';
-import { UseDemoDataOptions } from './useDemoData';
import { randomInt } from '../services/random-generator';
export interface FakeServerResponse {
@@ -53,14 +52,9 @@ export interface ServerSideQueryOptions {
sortModel?: GridSortModel;
firstRowToRender?: number;
lastRowToRender?: number;
+ groupFields?: string[];
}
-export const DEFAULT_DATASET_OPTIONS: UseDemoDataOptions = {
- dataSet: 'Commodity',
- rowLength: 100,
- maxColumns: 6,
-};
-
declare const DISABLE_CHANCE_RANDOM: any;
export const disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
@@ -323,7 +317,7 @@ export const loadServerRows = (
});
};
-interface ProcessTreeDataRowsResponse {
+interface NestedDataRowsResponse {
rows: GridRowModel[];
rootRowCount: number;
}
@@ -333,6 +327,7 @@ const findTreeDataRowChildren = (
parentPath: string[],
pathKey: string = 'path',
depth: number = 1, // the depth of the children to find relative to parentDepth, `-1` to find all
+ rowQualifier?: (row: GridRowModel) => boolean,
) => {
const parentDepth = parentPath.length;
const children = [];
@@ -346,7 +341,9 @@ const findTreeDataRowChildren = (
((depth < 0 && rowPath.length > parentDepth) || rowPath.length === parentDepth + depth) &&
parentPath.every((value, index) => value === rowPath[index])
) {
- children.push(row);
+ if (!rowQualifier || rowQualifier(row)) {
+ children.push(row);
+ }
}
}
return children;
@@ -427,14 +424,14 @@ const getTreeDataFilteredRows: GetTreeDataFilteredRows = (
};
/**
- * Simulates server data loading
+ * Simulates server data for tree-data feature
*/
export const processTreeDataRows = (
rows: GridRowModel[],
queryOptions: ServerSideQueryOptions,
serverOptions: ServerOptions,
columnsWithDefaultColDef: GridColDef[],
-): Promise => {
+): Promise => {
const { minDelay = 100, maxDelay = 300 } = serverOptions;
const pathKey = 'path';
// TODO: Support filtering and cursor based pagination
@@ -490,3 +487,124 @@ export const processTreeDataRows = (
}, delay); // simulate network latency
});
};
+
+/**
+ * Simulates server data for row grouping feature
+ */
+export const processRowGroupingRows = (
+ rows: GridValidRowModel[],
+ queryOptions: ServerSideQueryOptions,
+ serverOptions: ServerOptions,
+ columnsWithDefaultColDef: GridColDef[],
+): Promise => {
+ const { minDelay = 100, maxDelay = 300 } = serverOptions;
+ const pathKey = 'path';
+
+ if (maxDelay < minDelay) {
+ throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
+ }
+
+ if (queryOptions.groupKeys == null) {
+ throw new Error('serverOptions.groupKeys must be defined to compute row grouping data');
+ }
+
+ if (queryOptions.groupFields == null) {
+ throw new Error('serverOptions.groupFields must be defined to compute row grouping data');
+ }
+
+ const delay = randomInt(minDelay, maxDelay);
+
+ const pathsToAutogenerate = new Set();
+ let rowsWithPaths = rows;
+ const rowsWithMissingGroups: GridValidRowModel[] = [];
+
+ // add paths and generate parent rows based on `groupFields`
+ const groupFields = queryOptions.groupFields;
+ if (groupFields.length > 0) {
+ rowsWithPaths = rows.reduce((acc, row) => {
+ const partialPath = groupFields.map((field) => String(row[field]));
+ for (let index = 0; index < partialPath.length; index += 1) {
+ const value = partialPath[index];
+ if (value === undefined) {
+ if (index === 0) {
+ rowsWithMissingGroups.push({ ...row, group: false });
+ }
+ return acc;
+ }
+ const parentPath = partialPath.slice(0, index + 1);
+ const strigifiedPath = parentPath.join(',');
+ if (!pathsToAutogenerate.has(strigifiedPath)) {
+ pathsToAutogenerate.add(strigifiedPath);
+ }
+ }
+ acc.push({ ...row, path: [...partialPath, ''] });
+ return acc;
+ }, []);
+ } else {
+ rowsWithPaths = rows.map((row) => ({ ...row, path: [''] }));
+ }
+
+ const autogeneratedRows = Array.from(pathsToAutogenerate).map((path) => {
+ const pathArray = path.split(',');
+ return {
+ id: `auto-generated-parent-${pathArray.join('-')}`,
+ path: pathArray.slice(0, pathArray.length),
+ group: pathArray.slice(-1)[0],
+ };
+ });
+
+ // apply plain filtering
+ const filteredRows = getTreeDataFilteredRows(
+ [...autogeneratedRows, ...rowsWithPaths, ...rowsWithMissingGroups],
+ queryOptions.filterModel,
+ columnsWithDefaultColDef,
+ ) as GridValidRowModel[];
+
+ // get root row count
+ const rootRows = findTreeDataRowChildren(filteredRows, []);
+ const rootRowCount = rootRows.length;
+
+ let filteredRowsWithMissingGroups: GridValidRowModel[] = [];
+ let childRows = rootRows;
+ if (queryOptions.groupKeys.length === 0) {
+ filteredRowsWithMissingGroups = filteredRows.filter(({ group }) => group === false);
+ } else {
+ childRows = findTreeDataRowChildren(filteredRows, queryOptions.groupKeys);
+ }
+
+ let childRowsWithDescendantCounts = childRows.map((row) => {
+ const descendants = findTreeDataRowChildren(
+ filteredRows,
+ row[pathKey],
+ pathKey,
+ -1,
+ ({ id }) => typeof id !== 'string' || !id.startsWith('auto-generated-parent-'),
+ );
+ const descendantCount = descendants.length;
+ return { ...row, descendantCount } as GridRowModel;
+ });
+
+ if (queryOptions.sortModel) {
+ const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+ const sortedMissingGroups = [...filteredRowsWithMissingGroups].sort(rowComparator);
+ const sortedChildRows = [...childRowsWithDescendantCounts].sort(rowComparator);
+ childRowsWithDescendantCounts = [...sortedMissingGroups, ...sortedChildRows];
+ }
+
+ if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
+ // Only paginate root rows, grid should refetch root rows when `paginationModel` updates
+ const { pageSize, page } = queryOptions.paginationModel;
+ if (pageSize < childRowsWithDescendantCounts.length) {
+ childRowsWithDescendantCounts = childRowsWithDescendantCounts.slice(
+ page * pageSize,
+ (page + 1) * pageSize,
+ );
+ }
+ }
+
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve({ rows: childRowsWithDescendantCounts, rootRowCount });
+ }, delay); // simulate network latency
+ });
+};
diff --git a/packages/x-data-grid-generator/src/hooks/useMockServer.ts b/packages/x-data-grid-generator/src/hooks/useMockServer.ts
index 83c43fd30c05..e9c168f0ca08 100644
--- a/packages/x-data-grid-generator/src/hooks/useMockServer.ts
+++ b/packages/x-data-grid-generator/src/hooks/useMockServer.ts
@@ -9,23 +9,24 @@ import {
GridInitialState,
GridColumnVisibilityModel,
} from '@mui/x-data-grid-pro';
-import {
- UseDemoDataOptions,
- getColumnsFromOptions,
- extrapolateSeed,
- deepFreeze,
-} from './useDemoData';
+import { extrapolateSeed, deepFreeze } from './useDemoData';
+import { getCommodityColumns } from '../columns/commodities.columns';
+import { getEmployeeColumns } from '../columns/employees.columns';
import { GridColDefGenerator } from '../services/gridColDefGenerator';
import { getRealGridData, GridDemoData } from '../services/real-data-service';
-import { addTreeDataOptionsToDemoData } from '../services/tree-data-generator';
+import {
+ addTreeDataOptionsToDemoData,
+ AddPathToDemoDataOptions,
+} from '../services/tree-data-generator';
import {
loadServerRows,
processTreeDataRows,
- DEFAULT_DATASET_OPTIONS,
+ processRowGroupingRows,
DEFAULT_SERVER_OPTIONS,
} from './serverUtils';
import type { ServerOptions } from './serverUtils';
import { randomInt } from '../services';
+import { getMovieRows, getMovieColumns } from './useMovieData';
const dataCache = new LRUCache({
max: 10,
@@ -43,6 +44,66 @@ type UseMockServerResponse = {
loadNewData: () => void;
};
+type DataSet = 'Commodity' | 'Employee' | 'Movies';
+
+interface UseMockServerOptions {
+ dataSet: DataSet;
+ /**
+ * Has no effect when DataSet='Movies'
+ */
+ rowLength: number;
+ maxColumns?: number;
+ visibleFields?: string[];
+ editable?: boolean;
+ treeData?: AddPathToDemoDataOptions;
+ rowGrouping?: boolean;
+}
+
+interface GridMockServerData {
+ rows: GridRowModel[];
+ columns: GridColDefGenerator[] | GridColDef[];
+ initialState?: GridInitialState;
+}
+
+interface ColumnsOptions
+ extends Pick {}
+
+const GET_DEFAULT_DATASET_OPTIONS: (isRowGrouping: boolean) => UseMockServerOptions = (
+ isRowGrouping,
+) => ({
+ dataSet: isRowGrouping ? 'Movies' : 'Commodity',
+ rowLength: isRowGrouping ? getMovieRows().length : 100,
+ maxColumns: 6,
+});
+
+const getColumnsFromOptions = (options: ColumnsOptions): GridColDefGenerator[] | GridColDef[] => {
+ let columns;
+
+ switch (options.dataSet) {
+ case 'Commodity':
+ columns = getCommodityColumns(options.editable);
+ break;
+ case 'Employee':
+ columns = getEmployeeColumns();
+ break;
+ case 'Movies':
+ columns = getMovieColumns();
+ break;
+ default:
+ throw new Error('Unknown dataset');
+ }
+
+ if (options.visibleFields) {
+ columns = columns.map((col) =>
+ options.visibleFields?.includes(col.field) ? col : { ...col, hide: true },
+ );
+ }
+ if (options.maxColumns) {
+ columns = columns.slice(0, options.maxColumns);
+ }
+ return columns;
+};
+
function decodeParams(url: string): GridGetRowsParams {
const params = new URL(url).searchParams;
const decodedParams = {} as any;
@@ -76,12 +137,18 @@ const getInitialState = (columns: GridColDefGenerator[], groupingField?: string)
const defaultColDef = getGridDefaultColumnTypes();
+function sendEmptyResponse() {
+ return new Promise((resolve) => {
+ resolve({ rows: [], rowCount: 0 });
+ });
+}
+
export const useMockServer = (
- dataSetOptions?: Partial,
+ dataSetOptions?: Partial,
serverOptions?: ServerOptions & { verbose?: boolean },
shouldRequestsFail?: boolean,
): UseMockServerResponse => {
- const [data, setData] = React.useState();
+ const [data, setData] = React.useState();
const [index, setIndex] = React.useState(0);
const shouldRequestsFailRef = React.useRef(shouldRequestsFail ?? false);
@@ -91,7 +158,11 @@ export const useMockServer = (
}
}, [shouldRequestsFail]);
- const options = { ...DEFAULT_DATASET_OPTIONS, ...dataSetOptions };
+ const isRowGrouping = dataSetOptions?.rowGrouping ?? false;
+
+ const options = { ...GET_DEFAULT_DATASET_OPTIONS(isRowGrouping), ...dataSetOptions };
+
+ const isTreeData = options.treeData?.groupingField != null;
const columns = React.useMemo(() => {
return getColumnsFromOptions({
@@ -116,8 +187,6 @@ export const useMockServer = (
[columns],
);
- const isTreeData = options.treeData?.groupingField != null;
-
const getGroupKey = React.useMemo(() => {
if (isTreeData) {
return (row: GridRowModel): string => row[options.treeData!.groupingField!];
@@ -144,6 +213,13 @@ export const useMockServer = (
return undefined;
}
+ if (options.dataSet === 'Movies') {
+ const rowsData = { rows: getMovieRows(), columns };
+ setData(rowsData);
+ dataCache.set(cacheKey, rowsData);
+ return undefined;
+ }
+
let active = true;
(async () => {
@@ -193,10 +269,8 @@ export const useMockServer = (
const fetchRows = React.useCallback(
async (requestUrl: string): Promise => {
- if (!data || !requestUrl) {
- return new Promise((resolve) => {
- resolve({ rows: [], rowCount: 0 });
- });
+ if (!requestUrl || !data?.rows) {
+ return sendEmptyResponse();
}
const params = decodeParams(requestUrl);
const verbose = serverOptions?.verbose ?? true;
@@ -224,9 +298,21 @@ export const useMockServer = (
});
}
- if (isTreeData /* || TODO: `isRowGrouping` */) {
+ if (isTreeData) {
const { rows, rootRowCount } = await processTreeDataRows(
- data.rows,
+ data?.rows ?? [],
+ params,
+ serverOptionsWithDefault,
+ columnsWithDefaultColDef,
+ );
+
+ getRowsResponse = {
+ rows: rows.slice().map((row) => ({ ...row, path: undefined })),
+ rowCount: rootRowCount,
+ };
+ } else if (isRowGrouping) {
+ const { rows, rootRowCount } = await processRowGroupingRows(
+ data?.rows ?? [],
params,
serverOptionsWithDefault,
columnsWithDefaultColDef,
@@ -237,9 +323,8 @@ export const useMockServer = (
rowCount: rootRowCount,
};
} else {
- // plain data
const { returnedRows, nextCursor, totalRowCount } = await loadServerRows(
- data.rows,
+ data?.rows ?? [],
{ ...params, ...params.paginationModel },
serverOptionsWithDefault,
columnsWithDefaultColDef,
@@ -262,12 +347,13 @@ export const useMockServer = (
serverOptions?.useCursorPagination,
isTreeData,
columnsWithDefaultColDef,
+ isRowGrouping,
],
);
return {
columns: columnsWithDefaultColDef,
- initialState,
+ initialState: options.dataSet === 'Movies' ? {} : initialState,
getGroupKey,
getChildrenCount,
fetchRows,
diff --git a/packages/x-data-grid-generator/src/hooks/useMovieData.ts b/packages/x-data-grid-generator/src/hooks/useMovieData.ts
index 7820a7471fde..b9b196716839 100644
--- a/packages/x-data-grid-generator/src/hooks/useMovieData.ts
+++ b/packages/x-data-grid-generator/src/hooks/useMovieData.ts
@@ -546,6 +546,9 @@ const ROWS: GridRowModel[] = [
},
];
+export const getMovieColumns = (): GridColDef[] => COLUMNS;
+export const getMovieRows = (): GridRowModel[] => ROWS;
+
export const useMovieData = () => {
return {
rows: ROWS,
diff --git a/packages/x-data-grid-generator/src/hooks/useQuery.ts b/packages/x-data-grid-generator/src/hooks/useQuery.ts
index 62ae140bcdcd..5387a7e1f485 100644
--- a/packages/x-data-grid-generator/src/hooks/useQuery.ts
+++ b/packages/x-data-grid-generator/src/hooks/useQuery.ts
@@ -7,9 +7,15 @@ import {
getColumnsFromOptions,
getInitialState,
} from './useDemoData';
-import { DEFAULT_DATASET_OPTIONS, DEFAULT_SERVER_OPTIONS, loadServerRows } from './serverUtils';
+import { DEFAULT_SERVER_OPTIONS, loadServerRows } from './serverUtils';
import type { ServerOptions, QueryOptions, PageInfo } from './serverUtils';
+const DEFAULT_DATASET_OPTIONS: UseDemoDataOptions = {
+ dataSet: 'Commodity',
+ rowLength: 100,
+ maxColumns: 6,
+};
+
export const createFakeServer = (
dataSetOptions?: Partial,
serverOptions?: ServerOptions,
diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json
index 0099d542a43d..228a3581e84a 100644
--- a/packages/x-data-grid-premium/package.json
+++ b/packages/x-data-grid-premium/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-data-grid-premium",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "The Premium plan edition of the Data Grid Components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
diff --git a/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx
index 8106dec99163..46c76914dda7 100644
--- a/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx
+++ b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx
@@ -86,6 +86,7 @@ import {
rowGroupingStateInitializer,
} from '../hooks/features/rowGrouping/useGridRowGrouping';
import { useGridRowGroupingPreProcessors } from '../hooks/features/rowGrouping/useGridRowGroupingPreProcessors';
+import { useGridDataSourceRowGroupingPreProcessors } from '../hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors';
import { useGridExcelExport } from '../hooks/features/export/useGridExcelExport';
import {
cellSelectionStateInitializer,
@@ -105,6 +106,7 @@ export const useDataGridPremiumComponent = (
useGridRowSelectionPreProcessors(apiRef, props);
useGridRowReorderPreProcessors(apiRef, props);
useGridRowGroupingPreProcessors(apiRef, props);
+ useGridDataSourceRowGroupingPreProcessors(apiRef, props);
useGridTreeDataPreProcessors(apiRef, props);
useGridDataSourceTreeDataPreProcessors(apiRef, props);
useGridLazyLoaderPreProcessors(apiRef, props);
diff --git a/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx
index f2976b011913..27fd029bb344 100644
--- a/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx
+++ b/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx
@@ -1,13 +1,11 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { GridColumnMenuItemProps, useGridSelector } from '@mui/x-data-grid-pro';
-import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import { unstable_useId as useId } from '@mui/utils';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
import { useGridApiContext } from '../hooks/utils/useGridApiContext';
import { useGridRootProps } from '../hooks/utils/useGridRootProps';
import {
@@ -53,8 +51,8 @@ function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) {
return '';
}, [rootProps.aggregationFunctions, aggregationModel, colDef]);
- const handleAggregationItemChange = (event: SelectChangeEvent) => {
- const newAggregationItem = event.target?.value || undefined;
+ const handleAggregationItemChange = (event: Event) => {
+ const newAggregationItem = (event.target as HTMLSelectElement | null)?.value || undefined;
const currentModel = gridAggregationModelSelector(apiRef);
const { [colDef.field]: columnItem, ...otherColumnItems } = currentModel;
const newModel: GridAggregationModel =
@@ -69,26 +67,26 @@ function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) {
const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
return (
-
+
);
}
diff --git a/packages/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx
index 0cc989571312..7f661095f957 100644
--- a/packages/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx
+++ b/packages/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx
@@ -1,5 +1,4 @@
import * as React from 'react';
-import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import {
@@ -32,12 +31,16 @@ export function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps) {
const groupedColumn = columnsLookup[field];
const name = groupedColumn.headerName ?? field;
return (
-
+
);
};
diff --git a/packages/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx
index 48a8e21f85ff..9f100470d0b6 100644
--- a/packages/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx
+++ b/packages/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx
@@ -1,5 +1,4 @@
import * as React from 'react';
-import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import {
@@ -36,21 +35,21 @@ export function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps) {
if (rowGroupingModel.includes(colDef.field)) {
return (
-
+
);
}
return (
-
+
);
}
diff --git a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx
new file mode 100644
index 000000000000..0f7f159ee84c
--- /dev/null
+++ b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx
@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
+import {
+ useGridSelector,
+ getDataGridUtilityClass,
+ GridRenderCellParams,
+ GridGroupNode,
+} from '@mui/x-data-grid-pro';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps';
+import { GridPrivateApiPremium } from '../models/gridApiPremium';
+import { GridStatePremium } from '../models/gridStatePremium';
+
+type OwnerState = DataGridPremiumProcessedProps;
+
+const useUtilityClasses = (ownerState: OwnerState) => {
+ const { classes } = ownerState;
+
+ const slots = {
+ root: ['groupingCriteriaCell'],
+ toggle: ['groupingCriteriaCellToggle'],
+ loadingContainer: ['groupingCriteriaCellLoadingContainer'],
+ };
+
+ return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+interface GridGroupingCriteriaCellProps extends GridRenderCellParams {
+ hideDescendantCount?: boolean;
+}
+
+interface GridGroupingCriteriaCellIconProps
+ extends Pick {
+ descendantCount: number;
+}
+
+function GridGroupingCriteriaCellIcon(props: GridGroupingCriteriaCellIconProps) {
+ const apiRef = useGridPrivateApiContext() as React.MutableRefObject;
+ const rootProps = useGridRootProps();
+ const classes = useUtilityClasses(rootProps);
+ const { rowNode, id, field, descendantCount } = props;
+
+ const loadingSelector = (state: GridStatePremium) => state.dataSource.loading[id] ?? false;
+ const errorSelector = (state: GridStatePremium) => state.dataSource.errors[id];
+ const isDataLoading = useGridSelector(apiRef, loadingSelector);
+ const error = useGridSelector(apiRef, errorSelector);
+
+ const handleClick = (event: React.MouseEvent) => {
+ if (!rowNode.childrenExpanded) {
+ // always fetch/get from cache the children when the node is expanded
+ apiRef.current.unstable_dataSource.fetchRows(id);
+ } else {
+ apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+ }
+ apiRef.current.setCellFocus(id, field);
+ event.stopPropagation();
+ };
+
+ const Icon = rowNode.childrenExpanded
+ ? rootProps.slots.groupingCriteriaCollapseIcon
+ : rootProps.slots.groupingCriteriaExpandIcon;
+
+ if (isDataLoading) {
+ return (
+
+
+
+
+
+
+ ) : null;
+}
+
+export function GridDataSourceGroupingCriteriaCell(props: GridGroupingCriteriaCellProps) {
+ const { id, field, rowNode, hideDescendantCount, formattedValue } = props;
+
+ const rootProps = useGridRootProps();
+ const apiRef = useGridApiContext();
+ const rowSelector = (state: GridStatePremium) => state.rows.dataRowIdToModelLookup[id];
+ const row = useGridSelector(apiRef, rowSelector);
+ const classes = useUtilityClasses(rootProps);
+
+ let descendantCount = 0;
+ if (row) {
+ descendantCount = Math.max(rootProps.unstable_dataSource?.getChildrenCount?.(row) ?? 0, 0);
+ }
+
+ let cellContent: React.ReactNode;
+
+ const colDef = apiRef.current.getColumn(rowNode.groupingField!);
+ if (typeof colDef?.renderCell === 'function') {
+ cellContent = colDef.renderCell(props);
+ } else if (typeof formattedValue !== 'undefined') {
+ cellContent = {formattedValue};
+ } else {
+ cellContent = {rowNode.groupingKey};
+ }
+
+ return (
+
+ `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`,
+ }}
+ >
+
+ );
+}
diff --git a/packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx b/packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx
index 37e265b9233b..a73c4619b3bf 100644
--- a/packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx
+++ b/packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx
@@ -1,18 +1,19 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
import { GridExportMenuItemProps } from '@mui/x-data-grid-pro';
import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
import { GridExcelExportOptions } from '../hooks/features/export';
export type GridExcelExportMenuItemProps = GridExportMenuItemProps;
function GridExcelExportMenuItem(props: GridExcelExportMenuItemProps) {
const apiRef = useGridApiContext();
+ const rootProps = useGridRootProps();
const { hideMenu, options, ...other } = props;
return (
-
+
);
}
diff --git a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
index 634fbdad61b9..928b1cd11bfb 100644
--- a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
+++ b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { ownerDocument, useEventCallback } from '@mui/material/utils';
+import ownerDocument from '@mui/utils/ownerDocument';
+import useEventCallback from '@mui/utils/useEventCallback';
import {
GridPipeProcessor,
GridStateInitializer,
diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx
index caa1a42af8f5..194c62efa521 100644
--- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx
+++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx
@@ -12,10 +12,12 @@ import { GridColumnRawLookup, isSingleSelectColDef } from '@mui/x-data-grid-pro/
import { GridApiPremium } from '../../../models/gridApiPremium';
import { GridGroupingColumnFooterCell } from '../../../components/GridGroupingColumnFooterCell';
import { GridGroupingCriteriaCell } from '../../../components/GridGroupingCriteriaCell';
+import { GridDataSourceGroupingCriteriaCell } from '../../../components/GridDataSourceGroupingCriteriaCell';
import { GridGroupingColumnLeafCell } from '../../../components/GridGroupingColumnLeafCell';
import {
getRowGroupingFieldFromGroupingCriteria,
GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
+ RowGroupingStrategy,
} from './gridRowGroupingUtils';
import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
@@ -25,11 +27,24 @@ const GROUPING_COL_DEF_DEFAULT_PROPERTIES: Omit = {
disableReorder: true,
};
-const GROUPING_COL_DEF_FORCED_PROPERTIES: Pick = {
+const GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT: Pick<
+ GridColDef,
+ 'type' | 'editable' | 'groupable'
+> = {
editable: false,
groupable: false,
};
+const GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE: Pick<
+ GridColDef,
+ 'type' | 'editable' | 'groupable' | 'filterable' | 'sortable' | 'aggregable'
+> = {
+ ...GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT,
+ // TODO: Support these features on the grouping column(s)
+ filterable: false,
+ sortable: false,
+};
+
/**
* When sorting two cells with different grouping criteria, we consider that the cell with the grouping criteria coming first in the model should be displayed below.
* This can occur when some rows don't have all the fields. In which case we want the rows with the missing field to be displayed above.
@@ -122,6 +137,7 @@ interface CreateGroupingColDefMonoCriteriaParams {
* This value comes `prop.groupingColDef`.
*/
colDefOverride: GridGroupingColDefOverride | null | undefined;
+ strategy?: RowGroupingStrategy;
}
/**
@@ -132,11 +148,17 @@ export const createGroupingColDefForOneGroupingCriteria = ({
groupedByColDef,
groupingCriteria,
colDefOverride,
+ strategy = RowGroupingStrategy.Default,
}: CreateGroupingColDefMonoCriteriaParams): GridColDef => {
const { leafField, mainGroupingCriteria, hideDescendantCount, ...colDefOverrideProperties } =
colDefOverride ?? {};
const leafColDef = leafField ? columnsLookup[leafField] : null;
+ const CriteriaCell =
+ strategy === RowGroupingStrategy.Default
+ ? GridGroupingCriteriaCell
+ : GridDataSourceGroupingCriteriaCell;
+
// The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
const commonProperties: Partial = {
width: Math.max(
@@ -170,7 +192,7 @@ export const createGroupingColDefForOneGroupingCriteria = ({
// Render current grouping criteria groups
if (params.rowNode.groupingField === groupingCriteria) {
return (
- )}
hideDescendantCount={hideDescendantCount}
/>
@@ -222,7 +244,7 @@ export const createGroupingColDefForOneGroupingCriteria = ({
// The properties that can't be overridden with `colDefOverride`
const forcedProperties: Pick = {
field: getRowGroupingFieldFromGroupingCriteria(groupingCriteria),
- ...GROUPING_COL_DEF_FORCED_PROPERTIES,
+ ...GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT,
};
return {
@@ -246,6 +268,7 @@ interface CreateGroupingColDefSeveralCriteriaParams {
* This value comes `prop.groupingColDef`.
*/
colDefOverride: GridGroupingColDefOverride | null | undefined;
+ strategy?: RowGroupingStrategy;
}
/**
@@ -256,11 +279,17 @@ export const createGroupingColDefForAllGroupingCriteria = ({
columnsLookup,
rowGroupingModel,
colDefOverride,
+ strategy = RowGroupingStrategy.Default,
}: CreateGroupingColDefSeveralCriteriaParams): GridColDef => {
const { leafField, mainGroupingCriteria, hideDescendantCount, ...colDefOverrideProperties } =
colDefOverride ?? {};
const leafColDef = leafField ? columnsLookup[leafField] : null;
+ const CriteriaCell =
+ strategy === RowGroupingStrategy.Default
+ ? GridGroupingCriteriaCell
+ : GridDataSourceGroupingCriteriaCell;
+
// The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
const commonProperties: Partial = {
headerName: apiRef.current.getLocaleText('groupingColumnHeaderName'),
@@ -296,7 +325,7 @@ export const createGroupingColDefForAllGroupingCriteria = ({
// Render the groups
return (
- )}
hideDescendantCount={hideDescendantCount}
/>
@@ -344,7 +373,9 @@ export const createGroupingColDefForAllGroupingCriteria = ({
// The properties that can't be overridden with `colDefOverride`
const forcedProperties: Pick = {
field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
- ...GROUPING_COL_DEF_FORCED_PROPERTIES,
+ ...(strategy === RowGroupingStrategy.Default
+ ? GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT
+ : GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE),
};
return {
diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts
index 1cdec6a7c663..0310fb7b338d 100644
--- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts
+++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts
@@ -9,12 +9,16 @@ import {
GridRowModel,
GridColDef,
GridKeyValue,
+ GridDataSource,
} from '@mui/x-data-grid-pro';
import {
passFilterLogic,
GridAggregatedFilterItemApplier,
GridAggregatedFilterItemApplierResult,
GridColumnRawLookup,
+ GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
+ getRowGroupingCriteriaFromGroupingField,
+ isGroupingColumn,
} from '@mui/x-data-grid-pro/internals';
import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
import {
@@ -26,9 +30,16 @@ import { GridStatePremium } from '../../../models/gridStatePremium';
import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
-export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+export {
+ GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
+ getRowGroupingCriteriaFromGroupingField,
+ isGroupingColumn,
+};
-export const ROW_GROUPING_STRATEGY = 'grouping-columns';
+export enum RowGroupingStrategy {
+ Default = 'grouping-columns',
+ DataSource = 'grouping-columns-data-source',
+}
export const getRowGroupingFieldFromGroupingCriteria = (groupingCriteria: string | null) => {
if (groupingCriteria === null) {
@@ -38,20 +49,6 @@ export const getRowGroupingFieldFromGroupingCriteria = (groupingCriteria: string
return `__row_group_by_columns_group_${groupingCriteria}__`;
};
-export const getRowGroupingCriteriaFromGroupingField = (groupingColDefField: string) => {
- const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
-
- if (!match) {
- return null;
- }
-
- return match[1];
-};
-
-export const isGroupingColumn = (field: string) =>
- field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD ||
- getRowGroupingCriteriaFromGroupingField(field) !== null;
-
interface FilterRowTreeFromTreeDataParams {
rowTree: GridRowTreeConfig;
isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
@@ -178,10 +175,11 @@ export const filterRowTreeFromGroupingColumns = (
export const getColDefOverrides = (
groupingColDefProp: DataGridPremiumProcessedProps['groupingColDef'],
fields: string[],
+ strategy?: RowGroupingStrategy,
) => {
if (typeof groupingColDefProp === 'function') {
return groupingColDefProp({
- groupingName: ROW_GROUPING_STRATEGY,
+ groupingName: strategy ?? RowGroupingStrategy.Default,
fields,
});
}
@@ -199,6 +197,7 @@ export const mergeStateWithRowGroupingModel =
export const setStrategyAvailability = (
privateApiRef: React.MutableRefObject,
disableRowGrouping: boolean,
+ dataSource?: GridDataSource,
) => {
let isAvailable: () => boolean;
if (disableRowGrouping) {
@@ -210,7 +209,9 @@ export const setStrategyAvailability = (
};
}
- privateApiRef.current.setStrategyAvailability('rowTree', ROW_GROUPING_STRATEGY, isAvailable);
+ const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
+
+ privateApiRef.current.setStrategyAvailability('rowTree', strategy, isAvailable);
};
export const getCellGroupingCriteria = ({
diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts
new file mode 100644
index 000000000000..07ad4690d059
--- /dev/null
+++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts
@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { GridRowId, gridRowTreeSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
+import {
+ GridStrategyProcessor,
+ useGridRegisterStrategyProcessor,
+ createRowTree,
+ updateRowTree,
+ getVisibleRowsLookup,
+ skipSorting,
+ skipFiltering,
+ GridRowsPartialUpdates,
+} from '@mui/x-data-grid-pro/internals';
+import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+import { getGroupingRules, RowGroupingStrategy } from './gridRowGroupingUtils';
+import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
+import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
+
+export const useGridDataSourceRowGroupingPreProcessors = (
+ apiRef: React.MutableRefObject,
+ props: Pick<
+ DataGridPremiumProcessedProps,
+ | 'disableRowGrouping'
+ | 'groupingColDef'
+ | 'rowGroupingColumnMode'
+ | 'defaultGroupingExpansionDepth'
+ | 'isGroupExpandedByDefault'
+ | 'unstable_dataSource'
+ >,
+) => {
+ const createRowTreeForRowGrouping = React.useCallback>(
+ (params) => {
+ const getGroupKey = props.unstable_dataSource?.getGroupKey;
+ if (!getGroupKey) {
+ throw new Error('MUI X: No `getGroupKey` method provided with the dataSource.');
+ }
+
+ const getChildrenCount = props.unstable_dataSource?.getChildrenCount;
+ if (!getChildrenCount) {
+ throw new Error('MUI X: No `getChildrenCount` method provided with the dataSource.');
+ }
+
+ const sanitizedRowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
+ const columnsLookup = gridColumnLookupSelector(apiRef);
+ const groupingRules = getGroupingRules({
+ sanitizedRowGroupingModel,
+ columnsLookup,
+ });
+ apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation = groupingRules;
+
+ const getRowTreeBuilderNode = (rowId: GridRowId) => {
+ const parentPath = (params.updates as GridRowsPartialUpdates).groupKeys ?? [];
+ const row = params.dataRowIdToModelLookup[rowId];
+ const groupingRule = groupingRules[parentPath.length];
+ const groupingValueGetter = groupingRule?.groupingValueGetter;
+ const leafKey =
+ groupingValueGetter?.(
+ row[groupingRule.field] as never,
+ row,
+ columnsLookup[groupingRule.field],
+ apiRef,
+ ) ?? getGroupKey(params.dataRowIdToModelLookup[rowId]);
+ return {
+ id: rowId,
+ path: [...parentPath, leafKey ?? rowId.toString()].map((key, i) => ({
+ key,
+ field: groupingRules[i]?.field ?? null,
+ })),
+ serverChildrenCount: getChildrenCount(params.dataRowIdToModelLookup[rowId]) ?? 0,
+ };
+ };
+
+ if (params.updates.type === 'full') {
+ return createRowTree({
+ previousTree: params.previousTree,
+ nodes: params.updates.rows.map(getRowTreeBuilderNode),
+ defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+ isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+ groupingName: RowGroupingStrategy.DataSource,
+ });
+ }
+
+ return updateRowTree({
+ nodes: {
+ inserted: (params.updates as GridRowsPartialUpdates).actions.insert.map(
+ getRowTreeBuilderNode,
+ ),
+ modified: (params.updates as GridRowsPartialUpdates).actions.modify.map(
+ getRowTreeBuilderNode,
+ ),
+ removed: (params.updates as GridRowsPartialUpdates).actions.remove,
+ },
+ previousTree: params.previousTree!,
+ previousGroupsToFetch: params.previousGroupsToFetch,
+ previousTreeDepth: params.previousTreeDepths!,
+ defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+ isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+ groupingName: RowGroupingStrategy.DataSource,
+ });
+ },
+ [
+ apiRef,
+ props.unstable_dataSource,
+ props.defaultGroupingExpansionDepth,
+ props.isGroupExpandedByDefault,
+ ],
+ );
+
+ const filterRows = React.useCallback>(() => {
+ const rowTree = gridRowTreeSelector(apiRef);
+
+ return skipFiltering(rowTree);
+ }, [apiRef]);
+
+ const sortRows = React.useCallback>(() => {
+ const rowTree = gridRowTreeSelector(apiRef);
+
+ return skipSorting(rowTree);
+ }, [apiRef]);
+
+ useGridRegisterStrategyProcessor(
+ apiRef,
+ RowGroupingStrategy.DataSource,
+ 'rowTreeCreation',
+ createRowTreeForRowGrouping,
+ );
+ useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.DataSource, 'filtering', filterRows);
+ useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.DataSource, 'sorting', sortRows);
+ useGridRegisterStrategyProcessor(
+ apiRef,
+ RowGroupingStrategy.DataSource,
+ 'visibleRowsLookupCreation',
+ getVisibleRowsLookup,
+ );
+};
diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx
index b779e23a2064..fe562ab900c3 100644
--- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx
+++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx
@@ -19,7 +19,7 @@ import {
import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
import {
getRowGroupingFieldFromGroupingCriteria,
- ROW_GROUPING_STRATEGY,
+ RowGroupingStrategy,
isGroupingColumn,
mergeStateWithRowGroupingModel,
setStrategyAvailability,
@@ -63,6 +63,7 @@ export const useGridRowGrouping = (
| 'disableRowGrouping'
| 'slotProps'
| 'slots'
+ | 'unstable_dataSource'
>,
) => {
apiRef.current.registerControlState({
@@ -73,7 +74,7 @@ export const useGridRowGrouping = (
changeEvent: 'rowGroupingModelChange',
});
- /**
+ /*
* API METHODS
*/
const setRowGroupingModel = React.useCallback(
@@ -165,6 +166,16 @@ export const useGridRowGrouping = (
[props.disableRowGrouping],
);
+ const addGetRowsParams = React.useCallback>(
+ (params) => {
+ return {
+ ...params,
+ groupFields: gridRowGroupingModelSelector(apiRef),
+ };
+ },
+ [apiRef],
+ );
+
const stateExportPreProcessing = React.useCallback>(
(prevState, context) => {
const rowGroupingModelToExport = gridRowGroupingModelSelector(apiRef);
@@ -209,10 +220,11 @@ export const useGridRowGrouping = (
);
useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+ useGridRegisterPipeProcessor(apiRef, 'getRowsParams', addGetRowsParams);
useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
- /**
+ /*
* EVENTS
*/
const handleCellKeyDown = React.useCallback>(
@@ -233,10 +245,15 @@ export const useGridRowGrouping = (
return;
}
+ if (props.unstable_dataSource && !params.rowNode.childrenExpanded) {
+ apiRef.current.unstable_dataSource.fetchRows(params.id);
+ return;
+ }
+
apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
}
},
- [apiRef, props.rowGroupingColumnMode],
+ [apiRef, props.rowGroupingColumnMode, props.unstable_dataSource],
);
const checkGroupingColumnsModelDiff = React.useCallback<
@@ -258,7 +275,7 @@ export const useGridRowGrouping = (
// Refresh the row tree creation strategy processing
// TODO: Add a clean way to re-run a strategy processing without publishing a private event
- if (apiRef.current.getActiveStrategy('rowTree') === ROW_GROUPING_STRATEGY) {
+ if (apiRef.current.getActiveStrategy('rowTree') === RowGroupingStrategy.Default) {
apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
}
}
@@ -267,8 +284,11 @@ export const useGridRowGrouping = (
useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
useGridApiEventHandler(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
useGridApiEventHandler(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
+ useGridApiEventHandler(apiRef, 'rowGroupingModelChange', () =>
+ apiRef.current.unstable_dataSource.fetchRows(),
+ );
- /**
+ /*
* EFFECTS
*/
React.useEffect(() => {
diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
index 2fa403ec72d5..ac43f038695a 100644
--- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
+++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
@@ -31,7 +31,7 @@ import {
import {
filterRowTreeFromGroupingColumns,
getColDefOverrides,
- ROW_GROUPING_STRATEGY,
+ RowGroupingStrategy,
isGroupingColumn,
setStrategyAvailability,
getCellGroupingCriteria,
@@ -48,6 +48,7 @@ export const useGridRowGroupingPreProcessors = (
| 'rowGroupingColumnMode'
| 'defaultGroupingExpansionDepth'
| 'isGroupExpandedByDefault'
+ | 'unstable_dataSource'
>,
) => {
const getGroupingColDefs = React.useCallback(
@@ -56,6 +57,10 @@ export const useGridRowGroupingPreProcessors = (
return [];
}
+ const strategy = props.unstable_dataSource
+ ? RowGroupingStrategy.DataSource
+ : RowGroupingStrategy.Default;
+
const groupingColDefProp = props.groupingColDef;
// We can't use `gridGroupingRowsSanitizedModelSelector` here because the new columns are not in the state yet
@@ -73,8 +78,9 @@ export const useGridRowGroupingPreProcessors = (
createGroupingColDefForAllGroupingCriteria({
apiRef,
rowGroupingModel,
- colDefOverride: getColDefOverrides(groupingColDefProp, rowGroupingModel),
+ colDefOverride: getColDefOverrides(groupingColDefProp, rowGroupingModel, strategy),
columnsLookup: columnsState.lookup,
+ strategy,
}),
];
}
@@ -86,6 +92,7 @@ export const useGridRowGroupingPreProcessors = (
colDefOverride: getColDefOverrides(groupingColDefProp, [groupingCriteria]),
groupedByColDef: columnsState.lookup[groupingCriteria],
columnsLookup: columnsState.lookup,
+ strategy,
}),
);
}
@@ -95,7 +102,13 @@ export const useGridRowGroupingPreProcessors = (
}
}
},
- [apiRef, props.groupingColDef, props.rowGroupingColumnMode, props.disableRowGrouping],
+ [
+ apiRef,
+ props.groupingColDef,
+ props.rowGroupingColumnMode,
+ props.disableRowGrouping,
+ props.unstable_dataSource,
+ ],
);
const updateGroupingColumn = React.useCallback>(
@@ -177,7 +190,7 @@ export const useGridRowGroupingPreProcessors = (
nodes: params.updates.rows.map(getRowTreeBuilderNode),
defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
isGroupExpandedByDefault: props.isGroupExpandedByDefault,
- groupingName: ROW_GROUPING_STRATEGY,
+ groupingName: RowGroupingStrategy.Default,
});
}
@@ -191,7 +204,7 @@ export const useGridRowGroupingPreProcessors = (
previousTreeDepth: params.previousTreeDepths!,
defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
isGroupExpandedByDefault: props.isGroupExpandedByDefault,
- groupingName: ROW_GROUPING_STRATEGY,
+ groupingName: RowGroupingStrategy.Default,
});
},
[apiRef, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault],
@@ -228,35 +241,29 @@ export const useGridRowGroupingPreProcessors = (
useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
useGridRegisterStrategyProcessor(
apiRef,
- ROW_GROUPING_STRATEGY,
+ RowGroupingStrategy.Default,
'rowTreeCreation',
createRowTreeForRowGrouping,
);
- useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'filtering', filterRows);
- useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'sorting', sortRows);
+ useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.Default, 'filtering', filterRows);
+ useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.Default, 'sorting', sortRows);
useGridRegisterStrategyProcessor(
apiRef,
- ROW_GROUPING_STRATEGY,
+ RowGroupingStrategy.Default,
'visibleRowsLookupCreation',
getVisibleRowsLookup,
);
- /**
- * 1ST RENDER
- */
useFirstRender(() => {
- setStrategyAvailability(apiRef, props.disableRowGrouping);
+ setStrategyAvailability(apiRef, props.disableRowGrouping, props.unstable_dataSource);
});
- /**
- * EFFECTS
- */
const isFirstRender = React.useRef(true);
React.useEffect(() => {
if (!isFirstRender.current) {
- setStrategyAvailability(apiRef, props.disableRowGrouping);
+ setStrategyAvailability(apiRef, props.disableRowGrouping, props.unstable_dataSource);
} else {
isFirstRender.current = false;
}
- }, [apiRef, props.disableRowGrouping]);
+ }, [apiRef, props.disableRowGrouping, props.unstable_dataSource]);
};
diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json
index fb2a91f52a6c..8810d0971ce6 100644
--- a/packages/x-data-grid-pro/package.json
+++ b/packages/x-data-grid-pro/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-data-grid-pro",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "The Pro plan edition of the Data Grid components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
diff --git a/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx b/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx
index 0a07624dc306..89168d11fa8d 100644
--- a/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx
+++ b/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx
@@ -1,7 +1,6 @@
import * as React from 'react';
import { useRtl } from '@mui/system/RtlProvider';
import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { GridPinnedColumnPosition, GridColumnMenuItemProps } from '@mui/x-data-grid';
@@ -27,21 +26,21 @@ function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) {
onClick(event);
};
const pinToLeftMenuItem = (
-
+
);
const pinToRightMenuItem = (
-
+
);
if (!colDef) {
@@ -62,16 +61,16 @@ function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) {
: rootProps.slots.columnMenuPinRightIcon;
return (
-
-
+
);
}
diff --git a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx
index 79e002211adf..d5ee7aa79ab5 100644
--- a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx
+++ b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx
@@ -1,7 +1,6 @@
import * as React from 'react';
import composeClasses from '@mui/utils/composeClasses';
import Box from '@mui/material/Box';
-import Badge from '@mui/material/Badge';
import {
getDataGridUtilityClass,
GridRenderCellParams,
@@ -93,9 +92,9 @@ function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps)
{...rootProps?.slotProps?.baseIconButton}
>
-
+
+
) : null;
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
index 9c049130ee1a..c3fe31d4aea7 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
@@ -1,9 +1,8 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
import { unstable_capitalize as capitalize, HTMLElementType } from '@mui/utils';
import {
+ useGridRootProps,
useGridApiContext,
GridMenu,
GridFilterOperator,
@@ -33,6 +32,7 @@ function GridHeaderFilterMenu({
labelledBy,
}: GridHeaderFilterMenuProps) {
const apiRef = useGridApiContext();
+ const rootProps = useGridRootProps();
const hideMenu = React.useCallback(() => {
apiRef.current.hideHeaderFilterMenu();
@@ -56,7 +56,11 @@ function GridHeaderFilterMenu({
return (
-
+
{operators.map((op, i) => {
const label =
op?.headerLabel ??
@@ -65,7 +69,7 @@ function GridHeaderFilterMenu({
);
return (
-
+
);
})}
-
+
);
}
diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/cache.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/cache.ts
index dde8cad3d39f..5645235abf01 100644
--- a/packages/x-data-grid-pro/src/hooks/features/dataSource/cache.ts
+++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/cache.ts
@@ -15,6 +15,7 @@ function getKey(params: GridGetRowsParams) {
params.filterModel,
params.sortModel,
params.groupKeys,
+ params.groupFields,
]);
}
diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/gridDataSourceSelector.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/gridDataSourceSelector.ts
index 6b6aa5a9404d..09e2d34c9099 100644
--- a/packages/x-data-grid-pro/src/hooks/features/dataSource/gridDataSourceSelector.ts
+++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/gridDataSourceSelector.ts
@@ -21,8 +21,6 @@ export const gridGetRowsParamsSelector = createSelector(
(filterModel, sortModel, paginationModel) => {
return {
groupKeys: [],
- // TODO: Implement with `rowGrouping`
- groupFields: [],
paginationModel,
sortModel,
filterModel,
diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts
index 4e365d10d7ee..31f3d209a695 100644
--- a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts
+++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts
@@ -85,7 +85,10 @@ export const useGridDataSource = (
apiRef.current.resetDataSourceState();
}
- const fetchParams = gridGetRowsParamsSelector(apiRef);
+ const fetchParams = {
+ ...gridGetRowsParamsSelector(apiRef),
+ ...apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}),
+ };
const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
@@ -122,7 +125,8 @@ export const useGridDataSource = (
const fetchRowChildren = React.useCallback(
async (id) => {
- if (!props.treeData) {
+ const pipedParams = apiRef.current.unstable_applyPipeProcessors('getRowsParams', {});
+ if (!props.treeData && (pipedParams.groupFields?.length ?? 0) === 0) {
nestedDataManager.clearPendingRequest(id);
return;
}
@@ -138,7 +142,11 @@ export const useGridDataSource = (
return;
}
- const fetchParams = { ...gridGetRowsParamsSelector(apiRef), groupKeys: rowNode.path };
+ const fetchParams = {
+ ...gridGetRowsParamsSelector(apiRef),
+ ...pipedParams,
+ groupKeys: rowNode.path,
+ };
const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
diff --git a/packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx b/packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx
index 76e80c840299..16998e55615f 100644
--- a/packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx
+++ b/packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx
@@ -1,10 +1,11 @@
import * as React from 'react';
import { GRID_STRING_COL_DEF, GridColDef } from '@mui/x-data-grid';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '@mui/x-data-grid/internals';
import { GridApiPro } from '../../../models/gridApiPro';
import { GridDetailPanelToggleCell } from '../../../components/GridDetailPanelToggleCell';
import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector';
-export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+export { GRID_DETAIL_PANEL_TOGGLE_FIELD };
export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF: GridColDef = {
...GRID_STRING_COL_DEF,
diff --git a/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx b/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx
index c09bc45b8ded..0c6b841f939d 100644
--- a/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx
+++ b/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx
@@ -34,8 +34,7 @@ import {
} from '../../../utils/tree/models';
import { updateRowTree } from '../../../utils/tree/updateRowTree';
import { getVisibleRowsLookup } from '../../../utils/tree/utils';
-
-const DATA_SOURCE_TREE_DATA_STRATEGY = 'dataSourceTreeData';
+import { TreeDataStrategy } from '../treeData/gridTreeDataUtils';
export const useGridDataSourceTreeDataPreProcessors = (
privateApiRef: React.MutableRefObject,
@@ -53,7 +52,7 @@ export const useGridDataSourceTreeDataPreProcessors = (
const setStrategyAvailability = React.useCallback(() => {
privateApiRef.current.setStrategyAvailability(
'rowTree',
- DATA_SOURCE_TREE_DATA_STRATEGY,
+ TreeDataStrategy.DataSource,
props.treeData && props.unstable_dataSource ? () => true : () => false,
);
}, [privateApiRef, props.treeData, props.unstable_dataSource]);
@@ -64,7 +63,7 @@ export const useGridDataSourceTreeDataPreProcessors = (
let colDefOverride: GridGroupingColDefOverride | null | undefined;
if (typeof groupingColDefProp === 'function') {
const params: GridGroupingColDefOverrideParams = {
- groupingName: DATA_SOURCE_TREE_DATA_STRATEGY,
+ groupingName: TreeDataStrategy.DataSource,
fields: [],
};
@@ -171,7 +170,7 @@ export const useGridDataSourceTreeDataPreProcessors = (
nodes: params.updates.rows.map(getRowTreeBuilderNode),
defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
isGroupExpandedByDefault: props.isGroupExpandedByDefault,
- groupingName: DATA_SOURCE_TREE_DATA_STRATEGY,
+ groupingName: TreeDataStrategy.DataSource,
onDuplicatePath,
});
}
@@ -187,7 +186,7 @@ export const useGridDataSourceTreeDataPreProcessors = (
previousTreeDepth: params.previousTreeDepths!,
defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
isGroupExpandedByDefault: props.isGroupExpandedByDefault,
- groupingName: DATA_SOURCE_TREE_DATA_STRATEGY,
+ groupingName: TreeDataStrategy.DataSource,
});
},
[
@@ -212,25 +211,20 @@ export const useGridDataSourceTreeDataPreProcessors = (
useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateGroupingColumn);
useGridRegisterStrategyProcessor(
privateApiRef,
- DATA_SOURCE_TREE_DATA_STRATEGY,
+ TreeDataStrategy.DataSource,
'rowTreeCreation',
createRowTreeForTreeData,
);
useGridRegisterStrategyProcessor(
privateApiRef,
- DATA_SOURCE_TREE_DATA_STRATEGY,
+ TreeDataStrategy.DataSource,
'filtering',
filterRows,
);
+ useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.DataSource, 'sorting', sortRows);
useGridRegisterStrategyProcessor(
privateApiRef,
- DATA_SOURCE_TREE_DATA_STRATEGY,
- 'sorting',
- sortRows,
- );
- useGridRegisterStrategyProcessor(
- privateApiRef,
- DATA_SOURCE_TREE_DATA_STRATEGY,
+ TreeDataStrategy.DataSource,
'visibleRowsLookupCreation',
getVisibleRowsLookup,
);
diff --git a/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts b/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts
index 4fe1addd677f..f9f27fdd5d74 100644
--- a/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts
+++ b/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts
@@ -1,4 +1,5 @@
import { GRID_STRING_COL_DEF, GridColDef } from '@mui/x-data-grid';
+import { GRID_TREE_DATA_GROUPING_FIELD } from '@mui/x-data-grid/internals';
/**
* TODO: Add sorting and filtering on the value and the filteredDescendantCount
@@ -19,7 +20,7 @@ export const GRID_TREE_DATA_GROUPING_COL_DEF: Omit;
}
-export const TREE_DATA_STRATEGY = 'tree-data';
+export enum TreeDataStrategy {
+ Default = 'tree-data',
+ DataSource = 'tree-data-source',
+}
/**
* A node is visible if one of the following criteria is met:
diff --git a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx
index 74c0fcfcda38..6a5753c9eb60 100644
--- a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx
+++ b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx
@@ -19,7 +19,7 @@ import {
GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES,
} from './gridTreeDataGroupColDef';
import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
-import { filterRowTreeFromTreeData, TREE_DATA_STRATEGY } from './gridTreeDataUtils';
+import { filterRowTreeFromTreeData, TreeDataStrategy } from './gridTreeDataUtils';
import { GridPrivateApiPro } from '../../../models/gridApiPro';
import {
GridGroupingColDefOverride,
@@ -52,7 +52,7 @@ export const useGridTreeDataPreProcessors = (
const setStrategyAvailability = React.useCallback(() => {
privateApiRef.current.setStrategyAvailability(
'rowTree',
- TREE_DATA_STRATEGY,
+ TreeDataStrategy.Default,
props.treeData && !props.unstable_dataSource ? () => true : () => false,
);
}, [privateApiRef, props.treeData, props.unstable_dataSource]);
@@ -63,7 +63,7 @@ export const useGridTreeDataPreProcessors = (
let colDefOverride: GridGroupingColDefOverride | null | undefined;
if (typeof groupingColDefProp === 'function') {
const params: GridGroupingColDefOverrideParams = {
- groupingName: TREE_DATA_STRATEGY,
+ groupingName: TreeDataStrategy.Default,
fields: [],
};
@@ -158,7 +158,7 @@ export const useGridTreeDataPreProcessors = (
nodes: params.updates.rows.map(getRowTreeBuilderNode),
defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
isGroupExpandedByDefault: props.isGroupExpandedByDefault,
- groupingName: TREE_DATA_STRATEGY,
+ groupingName: TreeDataStrategy.Default,
onDuplicatePath,
});
}
@@ -173,7 +173,7 @@ export const useGridTreeDataPreProcessors = (
previousTreeDepth: params.previousTreeDepths!,
defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
isGroupExpandedByDefault: props.isGroupExpandedByDefault,
- groupingName: TREE_DATA_STRATEGY,
+ groupingName: TreeDataStrategy.Default,
});
},
[props.getTreeDataPath, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault],
@@ -211,15 +211,20 @@ export const useGridTreeDataPreProcessors = (
useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateGroupingColumn);
useGridRegisterStrategyProcessor(
privateApiRef,
- TREE_DATA_STRATEGY,
+ TreeDataStrategy.Default,
'rowTreeCreation',
createRowTreeForTreeData,
);
- useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'filtering', filterRows);
- useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'sorting', sortRows);
useGridRegisterStrategyProcessor(
privateApiRef,
- TREE_DATA_STRATEGY,
+ TreeDataStrategy.Default,
+ 'filtering',
+ filterRows,
+ );
+ useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.Default, 'sorting', sortRows);
+ useGridRegisterStrategyProcessor(
+ privateApiRef,
+ TreeDataStrategy.Default,
'visibleRowsLookupCreation',
getVisibleRowsLookup,
);
diff --git a/packages/x-data-grid-pro/src/internals/index.ts b/packages/x-data-grid-pro/src/internals/index.ts
index c0de9e27064b..ed619bb0cc9e 100644
--- a/packages/x-data-grid-pro/src/internals/index.ts
+++ b/packages/x-data-grid-pro/src/internals/index.ts
@@ -33,7 +33,6 @@ export { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorde
export { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
export { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
export { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
-export { TREE_DATA_STRATEGY } from '../hooks/features/treeData/gridTreeDataUtils';
export {
useGridRowPinning,
rowPinningStateInitializer,
@@ -61,4 +60,6 @@ export { sortRowTree } from '../utils/tree/sortRowTree';
export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from '../utils/tree/utils';
export type { RowTreeBuilderGroupingCriterion } from '../utils/tree/models';
+export { skipSorting, skipFiltering } from '../hooks/features/serverSideTreeData/utils';
+
export * from './propValidation';
diff --git a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
index 1f71824e507f..b8e38ff9df4a 100644
--- a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
@@ -86,10 +86,10 @@ describe('
-
React.cloneElement(button, { key: index, closeMenu: hideMenu }),
)}
-
+
)}
diff --git a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
index 3d39805c11f0..2c0edaec52bb 100644
--- a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
+++ b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { IconButtonProps } from '@mui/material/IconButton';
-import MenuItem, { MenuItemProps } from '@mui/material/MenuItem';
+import { MenuItemProps } from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -70,10 +70,10 @@ const GridActionsCellItem = React.forwardRef
+
{icon && {icon} }
{label}
-
+
);
},
);
diff --git a/packages/x-data-grid/src/components/cell/GridBooleanCell.tsx b/packages/x-data-grid/src/components/cell/GridBooleanCell.tsx
index 543e199229c2..7bdd414d0ff8 100644
--- a/packages/x-data-grid/src/components/cell/GridBooleanCell.tsx
+++ b/packages/x-data-grid/src/components/cell/GridBooleanCell.tsx
@@ -2,13 +2,16 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { SvgIconProps } from '@mui/material/SvgIcon';
import composeClasses from '@mui/utils/composeClasses';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridRowMaximumTreeDepthSelector } from '../../hooks/features/rows/gridRowsSelector';
import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { GridRenderCellParams } from '../../models/params/gridCellParams';
import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import { GridColDef } from '../../models/colDef/gridColDef';
import { isAutogeneratedRowNode } from '../../hooks/features/rows/gridRowsUtils';
+import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
+import type { GridColDef } from '../../models/colDef/gridColDef';
+import type { GridRenderCellParams } from '../../models/params/gridCellParams';
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from '../../internals/constants';
type OwnerState = { classes: DataGridProcessedProps['classes'] };
@@ -49,11 +52,20 @@ function GridBooleanCellRaw(props: GridBooleanCellProps) {
const ownerState = { classes: rootProps.classes };
const classes = useUtilityClasses(ownerState);
+ const maxDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
+ const isServerSideRowGroupingRow =
+ // @ts-expect-error - Access tree data prop
+ maxDepth > 0 && rowNode.type === 'group' && rootProps.treeData === false;
+
const Icon = React.useMemo(
() => (value ? rootProps.slots.booleanCellTrueIcon : rootProps.slots.booleanCellFalseIcon),
[rootProps.slots.booleanCellFalseIcon, rootProps.slots.booleanCellTrueIcon, value],
);
+ if (isServerSideRowGroupingRow && value === undefined) {
+ return null;
+ }
+
return (
{
- if (params.field !== '__row_group_by_columns_group__' && isAutogeneratedRowNode(params.rowNode)) {
+ if (
+ params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD &&
+ isAutogeneratedRowNode(params.rowNode)
+ ) {
return '';
}
diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx
index d48bc0ccdfe2..92641c45e46e 100644
--- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx
+++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx
@@ -1,7 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import Badge from '@mui/material/Badge';
import { useGridSelector } from '../../hooks';
import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
@@ -97,9 +96,9 @@ function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonPro
>
{counter > 1 && (
-
+
{iconButton}
-
+
)}
{counter === 1 && iconButton}
diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx
index 367931b7e3c9..778579bcc0e3 100644
--- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx
+++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx
@@ -1,7 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import composeClasses from '@mui/utils/composeClasses';
-import Badge from '@mui/material/Badge';
import { GridSlotsComponent } from '../../models/gridSlotsComponent';
import { GridSortDirection } from '../../models/gridSortModel';
import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -80,9 +79,9 @@ function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps) {
return (
{index != null && (
-
+
{iconButton}
-
+
)}
{index == null && iconButton}
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index 86b93de0962d..84cb0ec975eb 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -130,6 +130,9 @@ export const GridRootStyles = styled('div', {
{
[`& .${c.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer,
},
+ {
+ [`& .${c.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer,
+ },
{ [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell },
{
[`& .${c['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded'],
@@ -708,7 +711,7 @@ export const GridRootStyles = styled('div', {
alignSelf: 'stretch',
marginRight: t.spacing(2),
},
- [`& .${c.treeDataGroupingCellLoadingContainer}`]: {
+ [`& .${c.treeDataGroupingCellLoadingContainer}, .${c.groupingCriteriaCellLoadingContainer}`]: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -743,7 +746,7 @@ export const GridRootStyles = styled('div', {
},
[`& .${c.filler}`]: {
- flex: 1,
+ flex: '1 0 auto',
},
[`& .${c['filler--borderBottom']}`]: {
borderBottom: '1px solid var(--DataGrid-rowBorderColor)',
diff --git a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.tsx
index d86f61e78098..f7db300a230c 100644
--- a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.tsx
+++ b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.tsx
@@ -1,6 +1,5 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
@@ -25,12 +24,12 @@ function GridColumnMenuFilterItem(props: GridColumnMenuItemProps) {
}
return (
-
+
);
}
diff --git a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.tsx
index ce7660929312..f6594765ba05 100644
--- a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.tsx
+++ b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.tsx
@@ -1,6 +1,5 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
@@ -43,12 +42,12 @@ function GridColumnMenuHideItem(props: GridColumnMenuItemProps) {
}
return (
-
+
);
}
diff --git a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.tsx
index 860751420dda..df95549cbf30 100644
--- a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.tsx
+++ b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.tsx
@@ -1,6 +1,5 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
@@ -26,12 +25,12 @@ function GridColumnMenuManageItem(props: GridColumnMenuItemProps) {
}
return (
-
+
);
}
diff --git a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx
index de67a637774e..7ac4c77444da 100644
--- a/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx
+++ b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx
@@ -1,6 +1,5 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { useGridSelector } from '../../../../hooks/utils/useGridSelector';
@@ -55,26 +54,26 @@ function GridColumnMenuSortItem(props: GridColumnMenuItemProps) {
return (
{sortingOrder.includes('asc') && sortDirection !== 'asc' ? (
-
+
) : null}
{sortingOrder.includes('desc') && sortDirection !== 'desc' ? (
-
+
) : null}
{sortingOrder.includes(null) && sortDirection != null ? (
-
+
) : null}
);
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
index 89d0a2114e33..faf133512296 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -54,7 +54,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
(event: React.ChangeEvent) => {
const value = event.target.value;
setFilterValueState(value);
- applyValue({ ...item, value });
+ applyValue({ ...item, value: Boolean(value) });
},
[applyValue, item],
);
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
index 9fc87274ac2b..50da622479b8 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
@@ -47,9 +47,17 @@ function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps)
>(
(event, value) => {
setFilterValueState(value.map(String));
- applyValue({ ...item, value: [...value] });
+
+ applyValue({
+ ...item,
+ value: [
+ ...value.map((filterItemValue) =>
+ type === 'number' ? Number(filterItemValue) : filterItemValue,
+ ),
+ ],
+ });
},
- [applyValue, item],
+ [applyValue, item, type],
);
return (
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
index a16cc1a850dd..4391eed4166d 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
@@ -48,12 +48,16 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
setIsApplying(true);
filterTimeout.start(rootProps.filterDebounceMs, () => {
- const newItem = { ...item, value, fromInput: id! };
+ const newItem = {
+ ...item,
+ value: type === 'number' ? Number(value) : value,
+ fromInput: id!,
+ };
applyValue(newItem);
setIsApplying(false);
});
},
- [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout],
+ [filterTimeout, rootProps.filterDebounceMs, item, type, id, applyValue],
);
React.useEffect(() => {
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx
index 216335a99ba3..260f22437210 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx
@@ -1,6 +1,5 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
import {
GridToolbarContainer,
GridToolbarContainerProps,
@@ -61,7 +60,7 @@ const GridToolbar = React.forwardRef(
// TODO: remove the reference to excelOptions in community package
excelOptions={excelOptions}
/>
- ((option, index) => (
-
+
));
return (
@@ -137,7 +135,7 @@ const GridToolbarDensitySelector = React.forwardRef<
onClose={handleDensitySelectorClose}
position="bottom-start"
>
-
{densityElements}
-
+
);
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx
index 672e5e32dbe1..fada5a986636 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { ButtonProps } from '@mui/material/Button';
import { TooltipProps } from '@mui/material/Tooltip';
-import MenuItem from '@mui/material/MenuItem';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
import { GridCsvExportOptions, GridPrintExportOptions } from '../../models/gridExport';
import { GridToolbarExportContainer } from './GridToolbarExportContainer';
@@ -37,10 +37,11 @@ export interface GridToolbarExportProps {
function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps) {
const apiRef = useGridApiContext();
+ const rootProps = useGridRootProps();
const { hideMenu, options, ...other } = props;
return (
-
+
);
}
@@ -75,10 +76,11 @@ GridCsvExportMenuItem.propTypes = {
function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps) {
const apiRef = useGridApiContext();
+ const rootProps = useGridRootProps();
const { hideMenu, options, ...other } = props;
return (
-
+
);
}
@@ -107,22 +109,7 @@ GridPrintExportMenuItem.propTypes = {
hideFooter: PropTypes.bool,
hideToolbar: PropTypes.bool,
includeCheckboxes: PropTypes.bool,
- pageStyle: PropTypes.oneOfType([
- PropTypes.shape({
- '__@hasInstance@646': PropTypes.func.isRequired,
- '__@metadata@648': PropTypes.any,
- apply: PropTypes.func.isRequired,
- arguments: PropTypes.any.isRequired,
- bind: PropTypes.func.isRequired,
- call: PropTypes.func.isRequired,
- caller: PropTypes.object.isRequired,
- length: PropTypes.number.isRequired,
- name: PropTypes.string.isRequired,
- prototype: PropTypes.any.isRequired,
- toString: PropTypes.func.isRequired,
- }),
- PropTypes.string,
- ]),
+ pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
}),
} as any;
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx
index 2c00e4ba0b8b..df889bd02870 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx
@@ -1,7 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
-import MenuList from '@mui/material/MenuList';
import { ButtonProps } from '@mui/material/Button';
import { TooltipProps } from '@mui/material/Tooltip';
import { isHideMenuKey } from '../../utils/keyboardUtils';
@@ -85,7 +84,7 @@ const GridToolbarExportContainer = React.forwardRef<
onClose={handleMenuClose}
position="bottom-start"
>
- (child, { hideMenu: handleMenuClose });
})}
-
+
);
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
index 2e286a44519d..5f7bbb6f473f 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
@@ -6,7 +6,6 @@ import {
unstable_capitalize as capitalize,
unstable_useId as useId,
} from '@mui/utils';
-import Badge from '@mui/material/Badge';
import { ButtonProps } from '@mui/material/Button';
import { TooltipProps } from '@mui/material/Tooltip';
import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
@@ -144,9 +143,9 @@ const GridToolbarFilterButton = React.forwardRef
+
}
{...buttonProps}
onClick={toggleFilter}
diff --git a/packages/x-data-grid/src/components/virtualization/GridBottomContainer.tsx b/packages/x-data-grid/src/components/virtualization/GridBottomContainer.tsx
index ca0c0d5179eb..cc2a9c8c1789 100644
--- a/packages/x-data-grid/src/components/virtualization/GridBottomContainer.tsx
+++ b/packages/x-data-grid/src/components/virtualization/GridBottomContainer.tsx
@@ -3,9 +3,6 @@ import clsx from 'clsx';
import { styled } from '@mui/system';
import composeClasses from '@mui/utils/composeClasses';
import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
-import { gridDimensionsSelector } from '../../hooks/features/dimensions/gridDimensionsSelectors';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
const useUtilityClasses = () => {
const slots = {
@@ -23,25 +20,10 @@ const Element = styled('div')({
export function GridBottomContainer(props: React.PropsWithChildren) {
const classes = useUtilityClasses();
- const apiRef = useGridApiContext();
- const { viewportOuterSize, minimumSize, hasScrollX, scrollbarSize } = useGridSelector(
- apiRef,
- gridDimensionsSelector,
- );
- const scrollHeight = hasScrollX ? scrollbarSize : 0;
- const offset = Math.max(
- viewportOuterSize.height -
- minimumSize.height -
- // Subtract scroll height twice to account for GridVirtualScrollerFiller and horizontal scrollbar
- 2 * scrollHeight,
- 0,
- );
-
return (
('MuiDataGrid', [
'treeDataGroupingCellLoadingContainer',
'groupingCriteriaCell',
'groupingCriteriaCellToggle',
+ 'groupingCriteriaCellLoadingContainer',
'pinnedRows',
'pinnedRows--top',
'pinnedRows--bottom',
diff --git a/packages/x-data-grid/src/constants/gridDetailPanelToggleField.ts b/packages/x-data-grid/src/constants/gridDetailPanelToggleField.ts
deleted file mode 100644
index 7ad670d344b7..000000000000
--- a/packages/x-data-grid/src/constants/gridDetailPanelToggleField.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Can't import from pro package - hence duplication
-export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
diff --git a/packages/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts b/packages/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts
index 7cd516a68c06..d47a8bbe98b0 100644
--- a/packages/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts
+++ b/packages/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts
@@ -20,6 +20,7 @@ import {
import { GridRowEntry, GridRowId } from '../../../models/gridRows';
import { GridHydrateRowsValue } from '../../features/rows/gridRowsInterfaces';
import { GridPreferencePanelsValue } from '../../features/preferencesPanel';
+import { GridGetRowsParams } from '../../../models/gridDataSource';
import { HeightEntry } from '../../features/rows/gridRowsMetaInterfaces';
export type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
@@ -30,6 +31,7 @@ export interface GridPipeProcessingLookup {
context: GridColDef;
};
exportState: { value: GridInitialStateCommunity; context: GridExportStateParams };
+ getRowsParams: { value: Partial };
hydrateColumns: {
value: GridHydrateColumnsValue;
};
diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
index 3a89a3254b60..ee5325a7ad5b 100644
--- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
+++ b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -368,7 +368,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
return null;
}
- const { renderedColumns, firstColumnToRender, lastColumnToRender } = columnsToRender;
+ const { firstColumnToRender, lastColumnToRender } = columnsToRender;
const rowStructure = columnGroupsHeaderStructure[depth];
@@ -464,7 +464,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
pinnedPosition={pinnedPosition}
style={style}
indexInSection={indexInSection}
- sectionLength={renderedColumns.length}
+ sectionLength={rowStructure.length}
gridHasFiller={gridHasFiller}
/>
);
diff --git a/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts b/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts
index ee8b2fecd978..fbb6c996fd6f 100644
--- a/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts
+++ b/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts
@@ -1,7 +1,7 @@
import * as React from 'react';
-import Divider from '@mui/material/Divider';
import { GridColumnMenuRootProps } from './columnMenuInterfaces';
import { GridColDef } from '../../../models/colDef/gridColDef';
+import { useGridRootProps } from '../../utils/useGridRootProps';
import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
interface UseGridColumnMenuSlotsProps extends GridColumnMenuRootProps {
@@ -16,6 +16,7 @@ type UseGridColumnMenuSlotsResponse = Array<
const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => {
const apiRef = useGridPrivateApiContext();
+ const rootProps = useGridRootProps();
const {
defaultSlots,
defaultSlotProps,
@@ -71,7 +72,7 @@ const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => {
itemProps = { ...itemProps, ...customProps };
}
return addDividers && index !== sorted.length - 1
- ? [...acc, [processedComponents[key]!, itemProps], [Divider, {}]]
+ ? [...acc, [processedComponents[key]!, itemProps], [rootProps.slots.baseDivider, {}]]
: [...acc, [processedComponents[key]!, itemProps]];
}, []);
}, [
@@ -82,6 +83,7 @@ const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => {
processedComponents,
processedSlotProps,
userItems,
+ rootProps.slots.baseDivider,
]);
};
diff --git a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts
index 2c8e83b00875..3990d6ca8c6c 100644
--- a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts
+++ b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts
@@ -22,7 +22,7 @@ import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSele
import { getVisibleRows } from '../../utils/useGridVisibleRows';
import { clamp } from '../../../utils/utils';
import { GridCellCoordinates } from '../../../models/gridCell';
-import { GridRowEntry } from '../../../models/gridRows';
+import type { GridRowEntry, GridRowId } from '../../../models/gridRows';
import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
export const focusStateInitializer: GridStateInitializer = (state) => ({
@@ -423,19 +423,36 @@ export const useGridFocus = (
const handleRowSet = React.useCallback>(() => {
const cell = gridFocusCellSelector(apiRef);
- // If the focused cell is in a row which does not exist anymore, then remove the focus
+ // If the focused cell is in a row which does not exist anymore,
+ // focus previous row or remove the focus
if (cell && !apiRef.current.getRow(cell.id)) {
+ const lastFocusedRowId = gridFocusCellSelector(apiRef)?.id;
+
+ let nextRowId: GridRowId | null = null;
+ if (typeof lastFocusedRowId !== 'undefined') {
+ const lastFocusedRowIndex =
+ apiRef.current.getRowIndexRelativeToVisibleRows(lastFocusedRowId);
+ const currentPage = getVisibleRows(apiRef, {
+ pagination: props.pagination,
+ paginationMode: props.paginationMode,
+ });
+
+ const nextRow =
+ currentPage.rows[clamp(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
+ nextRowId = nextRow?.id ?? null;
+ }
+
apiRef.current.setState((state) => ({
...state,
focus: {
- cell: null,
+ cell: nextRowId === null ? null : { id: nextRowId, field: cell.field },
columnHeader: null,
columnHeaderFilter: null,
columnGroupHeader: null,
},
}));
}
- }, [apiRef]);
+ }, [apiRef, props.pagination, props.paginationMode]);
const handlePaginationModelChange = useEventcallback(() => {
const currentFocusedCell = gridFocusCellSelector(apiRef);
diff --git a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
index bed67114ffcf..8622525c32dd 100644
--- a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
+++ b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
@@ -1,5 +1,10 @@
import * as React from 'react';
import { useRtl } from '@mui/system/RtlProvider';
+import {
+ GRID_TREE_DATA_GROUPING_FIELD,
+ GRID_DETAIL_PANEL_TOGGLE_FIELD,
+} from '../../../internals/constants';
+import { isGroupingColumn } from '../../../internals/utils/gridRowGroupingUtils';
import { GridEventListener } from '../../../models/events';
import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
import { GridCellParams } from '../../../models/params/gridCellParams';
@@ -16,7 +21,6 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSel
import { gridClasses } from '../../../constants/gridClasses';
import { GridCellModes } from '../../../models/gridEditRowModel';
import { isNavigationKey } from '../../../utils/keyboardUtils';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
import { GridRowId } from '../../../models';
import { gridFocusColumnGroupHeaderSelector } from '../focus';
import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
@@ -587,8 +591,7 @@ export const useGridKeyboardNavigation = (
const colDef = (params as GridCellParams).colDef;
if (
colDef &&
- // `GRID_TREE_DATA_GROUPING_FIELD` from the Pro package
- colDef.field === '__tree_data_group__'
+ (colDef.field === GRID_TREE_DATA_GROUPING_FIELD || isGroupingColumn(colDef.field))
) {
break;
}
diff --git a/packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts b/packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts
index 786ba8881b45..f9c8698e5929 100644
--- a/packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts
+++ b/packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts
@@ -8,6 +8,8 @@ import {
import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
import { getPageCount } from './gridPaginationUtils';
+const ALL_RESULTS_PAGE_VALUE = -1;
+
/**
* @category Pagination
* @ignore - do not document.
@@ -92,10 +94,13 @@ export const gridPaginationRowRangeSelector = createSelectorMemoized(
paginationModel.pageSize * paginationModel.page,
visibleTopLevelRowCount - 1,
);
- const topLevelLastRowIndex = Math.min(
- topLevelFirstRowIndex + paginationModel.pageSize - 1,
- visibleTopLevelRowCount - 1,
- );
+ const topLevelLastRowIndex =
+ paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE
+ ? visibleTopLevelRowCount - 1
+ : Math.min(
+ topLevelFirstRowIndex + paginationModel.pageSize - 1,
+ visibleTopLevelRowCount - 1,
+ );
// The range contains no element
if (topLevelFirstRowIndex === -1 || topLevelLastRowIndex === -1) {
diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
index 7fd6366dca12..2c8515776a13 100644
--- a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
+++ b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
@@ -29,7 +29,7 @@ import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
import { GridStateInitializer } from '../../utils/useGridInitializeState';
import { GridRowSelectionModel } from '../../../models';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../internals/constants';
import { gridClasses } from '../../../constants/gridClasses';
import { isEventTargetInPortal } from '../../../utils/domUtils';
import { isMultipleRowSelectionEnabled, findRowsToSelect, findRowsToDeselect } from './utils';
diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts
index 12c5e75859b5..ef9dafab2321 100644
--- a/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts
+++ b/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts
@@ -1,5 +1,6 @@
import * as React from 'react';
import useLazyRef from '@mui/utils/useLazyRef';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../internals/constants';
import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
import { gridRenderContextSelector } from '../virtualization/gridVirtualizationSelectors';
@@ -15,6 +16,7 @@ import {
isRowContextInitialized,
getCellValue,
} from './gridRowSpanningUtils';
+import { GRID_CHECKBOX_SELECTION_FIELD } from '../../../colDef/gridCheckboxSelectionColDef';
export interface GridRowSpanningState {
spannedCells: Record>;
@@ -31,7 +33,11 @@ export type RowRange = { firstRowIndex: number; lastRowIndex: number };
const EMPTY_STATE = { spannedCells: {}, hiddenCells: {}, hiddenCellOriginMap: {} };
const EMPTY_RANGE: RowRange = { firstRowIndex: 0, lastRowIndex: 0 };
-const skippedFields = new Set(['__check__', '__reorder__', '__detail_panel_toggle__']);
+const skippedFields = new Set([
+ GRID_CHECKBOX_SELECTION_FIELD,
+ '__reorder__',
+ GRID_DETAIL_PANEL_TOGGLE_FIELD,
+]);
/**
* Default number of rows to process during state initialization to avoid flickering.
* Number `20` is arbitrarily chosen to be large enough to cover most of the cases without
diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
index 7ba0db4ac5da..59c8e1418af4 100644
--- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -534,7 +534,8 @@ export const useGridVirtualScroller = () => {
const contentSize = React.useMemo(() => {
const size: React.CSSProperties = {
width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
- height: contentHeight,
+ flexBasis: contentHeight,
+ flexShrink: 0,
};
if (rootProps.autoHeight && currentPage.rows.length === 0) {
diff --git a/packages/x-data-grid/src/internals/constants.ts b/packages/x-data-grid/src/internals/constants.ts
new file mode 100644
index 000000000000..2db12bb9c9d2
--- /dev/null
+++ b/packages/x-data-grid/src/internals/constants.ts
@@ -0,0 +1,3 @@
+export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
diff --git a/packages/x-data-grid/src/internals/index.ts b/packages/x-data-grid/src/internals/index.ts
index d07c6dd7d371..41f12e166367 100644
--- a/packages/x-data-grid/src/internals/index.ts
+++ b/packages/x-data-grid/src/internals/index.ts
@@ -177,4 +177,5 @@ export type { GridApiCaches } from '../models/gridApiCaches';
export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';
export * from './utils';
+export * from './constants';
export type { Localization } from '../utils/getGridLocalization';
diff --git a/packages/x-data-grid/src/internals/utils/gridRowGroupingUtils.ts b/packages/x-data-grid/src/internals/utils/gridRowGroupingUtils.ts
new file mode 100644
index 000000000000..5026a99260bf
--- /dev/null
+++ b/packages/x-data-grid/src/internals/utils/gridRowGroupingUtils.ts
@@ -0,0 +1,15 @@
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from '../constants';
+
+export const getRowGroupingCriteriaFromGroupingField = (groupingColDefField: string) => {
+ const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
+
+ if (!match) {
+ return null;
+ }
+
+ return match[1];
+};
+
+export const isGroupingColumn = (field: string) =>
+ field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD ||
+ getRowGroupingCriteriaFromGroupingField(field) !== null;
diff --git a/packages/x-data-grid/src/internals/utils/index.ts b/packages/x-data-grid/src/internals/utils/index.ts
index 5bdfb7c8c66f..4dd26999637b 100644
--- a/packages/x-data-grid/src/internals/utils/index.ts
+++ b/packages/x-data-grid/src/internals/utils/index.ts
@@ -1,3 +1,4 @@
export * from './computeSlots';
export * from './useProps';
export * from './propValidation';
+export * from './gridRowGroupingUtils';
diff --git a/packages/x-data-grid/src/joy/joySlots.tsx b/packages/x-data-grid/src/joy/joySlots.tsx
index 246799f568a6..a5645d892066 100644
--- a/packages/x-data-grid/src/joy/joySlots.tsx
+++ b/packages/x-data-grid/src/joy/joySlots.tsx
@@ -1,7 +1,9 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { ColorPaletteProp, Theme, VariantProp } from '@mui/joy/styles';
+import JoyBadge from '@mui/joy/Badge';
import JoyCheckbox from '@mui/joy/Checkbox';
+import JoyDivider from '@mui/joy/Divider';
import JoyInput from '@mui/joy/Input';
import JoyFormControl from '@mui/joy/FormControl';
import JoyFormLabel from '@mui/joy/FormLabel';
@@ -69,6 +71,20 @@ function convertVariant>(
+ ({ slotProps, variant, color, sx, ...props }, ref) => {
+ return (
+ }
+ ref={ref as any}
+ />
+ );
+ },
+);
+
const Checkbox = React.forwardRef<
HTMLElement,
NonNullable
@@ -374,7 +390,9 @@ const LoadingOverlay = React.forwardRef<
const joySlots: Partial = {
...joyIconSlots,
+ baseBadge: Badge,
baseCheckbox: Checkbox,
+ baseDivider: JoyDivider,
baseTextField: TextField,
baseButton: Button,
baseIconButton: IconButton,
diff --git a/packages/x-data-grid/src/locales/daDK.ts b/packages/x-data-grid/src/locales/daDK.ts
index 9e31979bb081..dc305634c30e 100644
--- a/packages/x-data-grid/src/locales/daDK.ts
+++ b/packages/x-data-grid/src/locales/daDK.ts
@@ -42,7 +42,7 @@ const daDKGrid: Partial = {
columnsManagementSearchTitle: 'Søg',
columnsManagementNoColumns: 'Ingen søjler',
columnsManagementShowHideAllText: 'Vis/Skjul Alle',
- // columnsManagementReset: 'Reset',
+ columnsManagementReset: 'Nulstil',
// Filter panel text
filterPanelAddFilter: 'Tilføj filter',
@@ -58,9 +58,9 @@ const daDKGrid: Partial = {
// Filter operators text
filterOperatorContains: 'indeholder',
- // filterOperatorDoesNotContain: 'does not contain',
+ filterOperatorDoesNotContain: 'indeholder ikke',
filterOperatorEquals: 'lig med',
- // filterOperatorDoesNotEqual: 'does not equal',
+ filterOperatorDoesNotEqual: 'ikke lig med',
filterOperatorStartsWith: 'begynder med',
filterOperatorEndsWith: 'ender med',
filterOperatorIs: 'er lig med',
@@ -81,9 +81,9 @@ const daDKGrid: Partial = {
// Header filter operators text
headerFilterOperatorContains: 'Indeholder',
- // headerFilterOperatorDoesNotContain: 'Does not contain',
+ headerFilterOperatorDoesNotContain: 'Indeholder ikke',
headerFilterOperatorEquals: 'Lig med',
- // headerFilterOperatorDoesNotEqual: 'Does not equal',
+ headerFilterOperatorDoesNotEqual: 'Ikke lig med',
headerFilterOperatorStartsWith: 'Begynder med',
headerFilterOperatorEndsWith: 'Ender med',
headerFilterOperatorIs: 'Er lig med',
diff --git a/packages/x-data-grid/src/locales/itIT.ts b/packages/x-data-grid/src/locales/itIT.ts
index 31b09da652c5..2058096d6165 100644
--- a/packages/x-data-grid/src/locales/itIT.ts
+++ b/packages/x-data-grid/src/locales/itIT.ts
@@ -39,10 +39,10 @@ const itITGrid: Partial = {
toolbarExportExcel: 'Scarica come Excel',
// Columns management text
- // columnsManagementSearchTitle: 'Search',
- // columnsManagementNoColumns: 'No columns',
- // columnsManagementShowHideAllText: 'Show/Hide All',
- // columnsManagementReset: 'Reset',
+ columnsManagementSearchTitle: 'Cerca',
+ columnsManagementNoColumns: 'Nessuna colonna',
+ columnsManagementShowHideAllText: 'Mostra/Nascondi Tutto',
+ columnsManagementReset: 'Resetta',
// Filter panel text
filterPanelAddFilter: 'Aggiungi un filtro',
@@ -58,13 +58,13 @@ const itITGrid: Partial = {
// Filter operators text
filterOperatorContains: 'contiene',
- // filterOperatorDoesNotContain: 'does not contain',
+ filterOperatorDoesNotContain: 'non contiene',
filterOperatorEquals: 'uguale a',
- // filterOperatorDoesNotEqual: 'does not equal',
+ filterOperatorDoesNotEqual: 'diverso da',
filterOperatorStartsWith: 'comincia per',
filterOperatorEndsWith: 'termina per',
filterOperatorIs: 'uguale a',
- filterOperatorNot: 'diversa da',
+ filterOperatorNot: 'diverso da',
filterOperatorAfter: 'dopo il',
filterOperatorOnOrAfter: 'a partire dal',
filterOperatorBefore: 'prima del',
@@ -81,26 +81,26 @@ const itITGrid: Partial = {
// Header filter operators text
headerFilterOperatorContains: 'Contiene',
- // headerFilterOperatorDoesNotContain: 'Does not contain',
- headerFilterOperatorEquals: 'uguale a',
- // headerFilterOperatorDoesNotEqual: 'Does not equal',
- headerFilterOperatorStartsWith: 'comincia per',
- headerFilterOperatorEndsWith: 'termina per',
- headerFilterOperatorIs: 'uguale a',
- headerFilterOperatorNot: 'diversa da',
- headerFilterOperatorAfter: 'dopo il',
- headerFilterOperatorOnOrAfter: 'a partire dal',
- headerFilterOperatorBefore: 'prima del',
- headerFilterOperatorOnOrBefore: 'fino al',
- headerFilterOperatorIsEmpty: 'è vuoto',
- headerFilterOperatorIsNotEmpty: 'non è vuoto',
- headerFilterOperatorIsAnyOf: 'è uno tra',
- 'headerFilterOperator=': 'uguale a',
- 'headerFilterOperator!=': 'diverso da',
- 'headerFilterOperator>': 'maggiore di',
- 'headerFilterOperator>=': 'maggiore o uguale a',
- 'headerFilterOperator<': 'minore di',
- 'headerFilterOperator<=': 'minore o uguale a',
+ headerFilterOperatorDoesNotContain: 'Non contiene',
+ headerFilterOperatorEquals: 'Uguale a',
+ headerFilterOperatorDoesNotEqual: 'Diverso da',
+ headerFilterOperatorStartsWith: 'Comincia per',
+ headerFilterOperatorEndsWith: 'Termina per',
+ headerFilterOperatorIs: 'Uguale a',
+ headerFilterOperatorNot: 'Diverso da',
+ headerFilterOperatorAfter: 'Dopo il',
+ headerFilterOperatorOnOrAfter: 'A partire dal',
+ headerFilterOperatorBefore: 'Prima del',
+ headerFilterOperatorOnOrBefore: 'Fino al',
+ headerFilterOperatorIsEmpty: 'È vuoto',
+ headerFilterOperatorIsNotEmpty: 'Non è vuoto',
+ headerFilterOperatorIsAnyOf: 'È uno tra',
+ 'headerFilterOperator=': 'Uguale a',
+ 'headerFilterOperator!=': 'Diverso da',
+ 'headerFilterOperator>': 'Maggiore di',
+ 'headerFilterOperator>=': 'Maggiore o uguale a',
+ 'headerFilterOperator<': 'Minore di',
+ 'headerFilterOperator<=': 'Minore o uguale a',
// Filter values text
filterValueAny: 'qualunque',
diff --git a/packages/x-data-grid/src/locales/ptBR.ts b/packages/x-data-grid/src/locales/ptBR.ts
index bd9a3153b868..4dbd7b806024 100644
--- a/packages/x-data-grid/src/locales/ptBR.ts
+++ b/packages/x-data-grid/src/locales/ptBR.ts
@@ -58,9 +58,9 @@ const ptBRGrid: Partial = {
// Filter operators text
filterOperatorContains: 'contém',
- // filterOperatorDoesNotContain: 'does not contain',
+ filterOperatorDoesNotContain: 'não contém',
filterOperatorEquals: 'é igual a',
- // filterOperatorDoesNotEqual: 'does not equal',
+ filterOperatorDoesNotEqual: 'não é igual a',
filterOperatorStartsWith: 'começa com',
filterOperatorEndsWith: 'termina com',
filterOperatorIs: 'é',
@@ -81,9 +81,9 @@ const ptBRGrid: Partial = {
// Header filter operators text
headerFilterOperatorContains: 'Contém',
- // headerFilterOperatorDoesNotContain: 'Does not contain',
+ headerFilterOperatorDoesNotContain: 'Não contém',
headerFilterOperatorEquals: 'Igual',
- // headerFilterOperatorDoesNotEqual: 'Does not equal',
+ headerFilterOperatorDoesNotEqual: 'Não é igual a',
headerFilterOperatorStartsWith: 'Começa com',
headerFilterOperatorEndsWith: 'Termina com',
headerFilterOperatorIs: 'É',
diff --git a/packages/x-data-grid/src/material/index.ts b/packages/x-data-grid/src/material/index.ts
index 6011f2c4606e..db2748de022c 100644
--- a/packages/x-data-grid/src/material/index.ts
+++ b/packages/x-data-grid/src/material/index.ts
@@ -1,4 +1,8 @@
+import MUIBadge from '@mui/material/Badge';
import MUICheckbox from '@mui/material/Checkbox';
+import MUIDivider from '@mui/material/Divider';
+import MUIMenuList from '@mui/material/MenuList';
+import MUIMenuItem from '@mui/material/MenuItem';
import MUITextField from '@mui/material/TextField';
import MUIFormControl from '@mui/material/FormControl';
import MUISelect from '@mui/material/Select';
@@ -81,7 +85,11 @@ const iconSlots: GridIconSlotsComponent = {
const materialSlots: GridBaseSlots & GridIconSlotsComponent = {
...iconSlots,
+ baseBadge: MUIBadge,
baseCheckbox: MUICheckbox,
+ baseDivider: MUIDivider,
+ baseMenuList: MUIMenuList,
+ baseMenuItem: MUIMenuItem,
baseTextField: MUITextField,
baseFormControl: MUIFormControl,
baseSelect: MUISelect,
diff --git a/packages/x-data-grid/src/models/gridExport.ts b/packages/x-data-grid/src/models/gridExport.ts
index 98220015a855..a0a628b4b38c 100644
--- a/packages/x-data-grid/src/models/gridExport.ts
+++ b/packages/x-data-grid/src/models/gridExport.ts
@@ -149,7 +149,7 @@ export interface GridPrintExportOptions extends GridExportOptions {
/**
* Provide Print specific styles to the print window.
*/
- pageStyle?: string | Function;
+ pageStyle?: string | (() => string);
/**
* Function that returns the list of row ids to export in the order they should be exported.
* @param {GridPrintGetRowsToExportParams} params With all properties from [[GridPrintGetRowsToExportParams]].
diff --git a/packages/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts
index 4fe7ea508c74..c9c38a0fe356 100644
--- a/packages/x-data-grid/src/models/gridSlotsComponent.ts
+++ b/packages/x-data-grid/src/models/gridSlotsComponent.ts
@@ -5,6 +5,11 @@ import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
export type { GridSlotProps } from './gridSlotsComponentsProps';
export interface GridBaseSlots {
+ /**
+ * The custom Badge component used in the grid for both header and cells.
+ * @default Badge
+ */
+ baseBadge: React.JSXElementConstructor;
/**
* The custom Checkbox component used in the grid for both header and cells.
* @default Checkbox
@@ -15,6 +20,21 @@ export interface GridBaseSlots {
* @default Chip
*/
baseChip: React.JSXElementConstructor;
+ /**
+ * The custom Divider component used in the grid.
+ * @default Divider
+ */
+ baseDivider: React.JSXElementConstructor;
+ /**
+ * The custom MenuList component used in the grid.
+ * @default MenuList
+ */
+ baseMenuList: React.JSXElementConstructor;
+ /**
+ * The custom MenuItem component used in the grid.
+ * @default MenuItem
+ */
+ baseMenuItem: React.JSXElementConstructor;
/**
* The custom InputAdornment component used in the grid.
* @default InputAdornment
diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
index 6ea9c9f27613..8b709b41a55b 100644
--- a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
+++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
@@ -1,5 +1,8 @@
import * as React from 'react';
+import type { BadgeProps } from '@mui/material/Badge';
import type { CheckboxProps } from '@mui/material/Checkbox';
+import type { MenuListProps } from '@mui/material/MenuList';
+import type { MenuItemProps } from '@mui/material/MenuItem';
import type { TextFieldProps } from '@mui/material/TextField';
import type { FormControlProps } from '@mui/material/FormControl';
import type { SelectProps } from '@mui/material/Select';
@@ -31,8 +34,14 @@ import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay';
import type { GridRowCountProps } from '../components/GridRowCount';
import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
+type DividerProps = {};
+
// Overrides for module augmentation
+export interface BaseBadgePropsOverrides {}
export interface BaseCheckboxPropsOverrides {}
+export interface BaseDividerPropsOverrides {}
+export interface BaseMenuListPropsOverrides {}
+export interface BaseMenuItemPropsOverrides {}
export interface BaseTextFieldPropsOverrides {}
export interface BaseFormControlPropsOverrides {}
export interface BaseSelectPropsOverrides {}
@@ -66,7 +75,11 @@ export interface SkeletonCellPropsOverrides {}
export interface RowPropsOverrides {}
export interface GridSlotProps {
+ baseBadge: BadgeProps & BaseBadgePropsOverrides;
baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides;
+ baseDivider: DividerProps & BaseDividerPropsOverrides;
+ baseMenuList: MenuListProps & BaseMenuListPropsOverrides;
+ baseMenuItem: MenuItemProps & BaseMenuItemPropsOverrides;
baseTextField: TextFieldProps & BaseTextFieldPropsOverrides;
baseFormControl: FormControlProps & BaseFormControlPropsOverrides;
baseSelect: SelectProps & BaseSelectPropsOverrides;
diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
index 8a19bf501a4c..4ad235c405e8 100644
--- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
@@ -228,16 +228,15 @@ describe('
+
+ );
+ }
+ render( &
React.RefAttributes,
@@ -29,7 +29,7 @@ type DatePickerComponent = (<
*/
const DateRangePicker = React.forwardRef(function DateRangePicker<
TDate extends PickerValidDate,
- TEnableAccessibleFieldDOMStructure extends boolean = false,
+ TEnableAccessibleFieldDOMStructure extends boolean = true,
>(
inProps: DateRangePickerProps,
ref: React.Ref,
@@ -140,7 +140,7 @@ DateRangePicker.propTypes = {
*/
displayWeekNumber: PropTypes.bool,
/**
- * @default false
+ * @default true
*/
enableAccessibleFieldDOMStructure: PropTypes.any,
/**
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts
index cc56765af366..95cd8b8a6b63 100644
--- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts
@@ -22,7 +22,7 @@ export interface DateRangePickerSlotProps<
export interface DateRangePickerProps<
TDate extends PickerValidDate,
- TEnableAccessibleFieldDOMStructure extends boolean = false,
+ TEnableAccessibleFieldDOMStructure extends boolean = true,
> extends DesktopDateRangePickerProps,
MobileDateRangePickerProps {
/**
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx
index 64a1316f3b78..53837bb78ad5 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -11,7 +11,7 @@ import { MobileDateTimeRangePicker } from '../MobileDateTimeRangePicker';
type DateTimeRangePickerComponent = (<
TDate extends PickerValidDate,
- TEnableAccessibleFieldDOMStructure extends boolean = false,
+ TEnableAccessibleFieldDOMStructure extends boolean = true,
>(
props: DateTimeRangePickerProps &
React.RefAttributes,
@@ -29,7 +29,7 @@ type DateTimeRangePickerComponent = (<
*/
const DateTimeRangePicker = React.forwardRef(function DateTimeRangePicker<
TDate extends PickerValidDate,
- TEnableAccessibleFieldDOMStructure extends boolean = false,
+ TEnableAccessibleFieldDOMStructure extends boolean = true,
>(
inProps: DateTimeRangePickerProps,
ref: React.Ref,
@@ -150,7 +150,7 @@ DateTimeRangePicker.propTypes = {
*/
displayWeekNumber: PropTypes.bool,
/**
- * @default false
+ * @default true
*/
enableAccessibleFieldDOMStructure: PropTypes.any,
/**
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts
index 109b4715c963..aaa9942d7bf1 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts
@@ -22,7 +22,7 @@ export interface DateTimeRangePickerSlotProps<
export interface DateTimeRangePickerProps<
TDate extends PickerValidDate,
- TEnableAccessibleFieldDOMStructure extends boolean = false,
+ TEnableAccessibleFieldDOMStructure extends boolean = true,
> extends DesktopDateTimeRangePickerProps,
MobileDateTimeRangePickerProps {
/**
diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx
index 984548ad2a1b..efae31fdc727 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx
@@ -17,7 +17,7 @@ import { DateRange } from '../models';
type DesktopDateRangePickerComponent = (<
TDate extends PickerValidDate,
- TEnableAccessibleFieldDOMStructure extends boolean = false,
+ TEnableAccessibleFieldDOMStructure extends boolean = true,
>(
props: DesktopDateRangePickerProps &
React.RefAttributes,
@@ -35,7 +35,7 @@ type DesktopDateRangePickerComponent = (<
*/
const DesktopDateRangePicker = React.forwardRef(function DesktopDateRangePicker<
TDate extends PickerValidDate,
- TEnableAccessibleFieldDOMStructure extends boolean = false,
+ TEnableAccessibleFieldDOMStructure extends boolean = true,
>(
inProps: DesktopDateRangePickerProps,
ref: React.Ref,
@@ -176,7 +176,7 @@ DesktopDateRangePicker.propTypes = {
*/
displayWeekNumber: PropTypes.bool,
/**
- * @default false
+ * @default true
*/
enableAccessibleFieldDOMStructure: PropTypes.any,
/**
diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts
index 8c96020fd9fa..b08f4d5e5382 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts
@@ -26,7 +26,7 @@ export interface DesktopDateRangePickerSlotProps<
export interface DesktopDateRangePickerProps<
TDate extends PickerValidDate,
- TEnableAccessibleFieldDOMStructure extends boolean = false,
+ TEnableAccessibleFieldDOMStructure extends boolean = true,
> extends BaseDateRangePickerProps,
DesktopRangeOnlyPickerProps {
/**
diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx
index 8ec961707343..7febfb5df6bb 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx
@@ -30,7 +30,6 @@ describe('
('textbox', { hidden: true }).name).to.equal('test');
unmount();
- // Test with v6 input
- render(('textbox').name).to.equal('test');
});
});
@@ -141,7 +140,6 @@ describe('
-
{
+ 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) => {
+ virtualElement.current = generateVirtualElement({
+ 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: virtualElement.current };
+}
+
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 +87,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 fcaf28469db1..926b4fd3179d 100644
--- a/docs/data/charts/tooltip/CustomItemTooltip.tsx
+++ b/docs/data/charts/tooltip/CustomItemTooltip.tsx
@@ -1,25 +1,88 @@
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 { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useSvgRef } from '@mui/x-charts/hooks';
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 virtualElement = React.useRef(generateVirtualElement({ 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) => {
+ virtualElement.current = generateVirtualElement({
+ 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: virtualElement.current };
+}
+
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 +93,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/ItemTooltip.js b/docs/data/charts/tooltip/ItemTooltip.js
index 68fbab1d77ae..cb2a90370e5e 100644
--- a/docs/data/charts/tooltip/ItemTooltip.js
+++ b/docs/data/charts/tooltip/ItemTooltip.js
@@ -1,23 +1,80 @@
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 virtualElement = React.useRef(generateVirtualElement({ 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) => {
+ virtualElement.current = generateVirtualElement({
+ 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: virtualElement.current };
+}
+
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 +85,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 68fbab1d77ae..5069ad32df3d 100644
--- a/docs/data/charts/tooltip/ItemTooltip.tsx
+++ b/docs/data/charts/tooltip/ItemTooltip.tsx
@@ -1,23 +1,86 @@
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 virtualElement = React.useRef(generateVirtualElement({ 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) => {
+ virtualElement.current = generateVirtualElement({
+ 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: virtualElement.current };
+}
+
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 +91,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 4e19cd1bc9f6..11bfb8fe8668 100644
--- a/docs/data/charts/tooltip/ItemTooltipFixedY.js
+++ b/docs/data/charts/tooltip/ItemTooltipFixedY.js
@@ -1,28 +1,92 @@
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 virtualElement = React.useRef(generateVirtualElement({ 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) => {
+ virtualElement.current = generateVirtualElement({
+ x: event.clientX,
+ // Add the y-coordinate of the to the to margin between the and the drawing area
+ y: svgRef.current.getBoundingClientRect().top + drawingArea.top,
+ });
+ 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 (
diff --git a/docs/data/charts/tooltip/ItemTooltipFixedY.tsx b/docs/data/charts/tooltip/ItemTooltipFixedY.tsx
index 3059c260afca..b6feefe896f4 100644
--- a/docs/data/charts/tooltip/ItemTooltipFixedY.tsx
+++ b/docs/data/charts/tooltip/ItemTooltipFixedY.tsx
@@ -1,28 +1,98 @@
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';
+import { generateVirtualElement } 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 virtualElement = React.useRef(generateVirtualElement({ 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) => {
+ virtualElement.current = generateVirtualElement({
+ x: event.clientX,
+ // Add the y-coordinate of the to the to margin between the and the drawing area
+ y: svgRef.current.getBoundingClientRect().top + drawingArea.top,
+ });
+ 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 (
diff --git a/docs/data/charts/tooltip/ItemTooltipTopElement.js b/docs/data/charts/tooltip/ItemTooltipTopElement.js
index 7d86e69b81e4..a3b52483984e 100644
--- a/docs/data/charts/tooltip/ItemTooltipTopElement.js
+++ b/docs/data/charts/tooltip/ItemTooltipTopElement.js
@@ -2,14 +2,59 @@ 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 +66,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 +86,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,
diff --git a/docs/data/charts/tooltip/ItemTooltipTopElement.tsx b/docs/data/charts/tooltip/ItemTooltipTopElement.tsx
index d69ab33e96da..a84a45cdc39b 100644
--- a/docs/data/charts/tooltip/ItemTooltipTopElement.tsx
+++ b/docs/data/charts/tooltip/ItemTooltipTopElement.tsx
@@ -2,14 +2,65 @@ import * as React from 'react';
import { ScaleBand } from '@mui/x-charts-vendor/d3-scale';
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, MousePosition } from './generateVirtualElement';
+import { generateVirtualElement } 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 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 +72,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 +91,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 +
diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md
index 655886065223..f53171fca6e5 100644
--- a/docs/data/charts/tooltip/tooltip.md
+++ b/docs/data/charts/tooltip/tooltip.md
@@ -15,8 +15,8 @@ If you are using composition, you can add the ` ({
- 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 e1272f2776ba..ea3b72c58ed1 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 100188718fae..70bc3e35f25e 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 cd89c78cbe62..1875037ac5bf 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 d5689bc6ecbd..b9059be151f0 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 c58c4bf79e2d..cb127be3cb88 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 75364b0c7c81..89c245b09175 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 bfa80b2c2523..96ed3a295aa2 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 9c667a5f013e..83eb196585b7 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 08d912a07057..3b7a149dd701 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);
};
-;
```
-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/overview/DataGridPremiumDemo.js b/docs/data/data-grid/overview/DataGridPremiumDemo.js
index 98a6959cff62..3e99541b76cb 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 98a6959cff62..3e99541b76cb 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 667abfb9a412..2cdb2ddfa58b 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/pagination/PageSizeCustomOptions.tsx b/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx
index 667abfb9a412..2cdb2ddfa58b 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 88965a8c26f4..1f4dad3d8994 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 90b26b56d8d7..7259d7fca5b0 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:
+
+
+
+ );
+}
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 000000000000..91c7f66a6d99
--- /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 000000000000..920c80a41342
--- /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 000000000000..793347a26301
--- /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 000000000000..4545cf49f9e7
--- /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 000000000000..bdb42747fc07
--- /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 000000000000..64aa58a45d8e
--- /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 537ef8ad0d54..25b6044f3f43 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 8e77fe0542bf..d5c725ac456e 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 5aed416321e1..37479bd4801b 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-field/BrowserV6Field.js b/docs/data/date-pickers/custom-field/BrowserV6Field.js deleted file mode 100644 index 63be3f56e884..000000000000 --- 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 ( -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 000000000000..eea548d0fbc0 --- /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 787bbefb3182..ab73ca9e1900 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 000000000000..18a1f57af80f --- /dev/null +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -0,0 +1,316 @@ +--- +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 `Create your custom Tree View.
:::warning The `useTreeView` hook is not public API for now, @@ -143,7 +143,7 @@ Once `focusedItemId` becomes a model, we could consider removing the notion of s ### Populate the Tree View instance -The Tree View instance is an object accessible in all the plugins and in the `TreeItem`. +The Tree View instance is an object accessible in all the plugins and in the Tree Item. It is the main way a plugin can provide features to the rest of the component. ```ts @@ -268,7 +268,7 @@ type UseCustomPluginSignature = TreeViewPluginSignature<{ params: UseCustomPluginParams; // The params specific to your plugins after running `getDefaultizedParams` defaultizedParams: UseCustomPluginDefaultizedParams; - // The methods added to the tree view instance by your plugin + // The methods added to the Tree View instance by your plugin instance: UseCustomPluginInstance; // The events emitted by your plugin events: UseCustomPluginEvents; @@ -325,6 +325,6 @@ type UseCustomPluginSignature = TreeViewPluginSignature<{ ### Log expanded items -Interact with the tree view to see the expanded items being logged: +Interact with the Tree View to see the expanded items being logged: {{"demo": "LogExpandedItems.js"}} diff --git a/docs/data/tree-view/rich-tree-view/items/items.md b/docs/data/tree-view/rich-tree-view/items/items.md index fbf179e3685e..49db9da0a4e2 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 000000000000..c41780b8fb9c
--- /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 2175d7ad3978..02036050d502 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
+
+
+
+
### 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 b93e60f39e00..000000000000
--- 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 (
- - 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
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 3ba5993e5187..a2fdbd15c255 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 a56fd8d2d75a..86afc50c65db 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 1ec2e89e98d8..000000000000
--- 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 000000000000..f93d4cbd8c79
--- /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 000000000000..c39a07ae223f
--- /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 f0febee14167..5177a55030aa 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 765c53c0efd9..7558c542dc41 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 741584687456..b73f676852b2 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\""
@@ -95,7 +95,7 @@
"@mui/internal-markdown": "^1.0.17",
"@mui/internal-test-utils": "^1.0.17",
"@mui/material": "^5.16.7",
- "@mui/monorepo": "github:mui/material-ui#010de4505361345951824d905d1508d6f258ba67",
+ "@mui/monorepo": "github:mui/material-ui#ca637077e091b7f1f6e591ded5a453edcc784204",
"@mui/utils": "^5.16.6",
"@next/eslint-plugin-next": "14.2.15",
"@octokit/plugin-retry": "^7.1.2",
@@ -107,9 +107,9 @@
"@types/chai-dom": "^1.11.3",
"@types/fs-extra": "^11.0.4",
"@types/karma": "^6.3.8",
- "@types/lodash": "^4.17.10",
+ "@types/lodash": "^4.17.12",
"@types/mocha": "^10.0.9",
- "@types/node": "^20.16.11",
+ "@types/node": "^20.16.14",
"@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.1",
"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.1",
"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-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.2",
"jsdom": "24.1.3",
"jss": "^10.10.0",
"jss-plugin-template": "^10.10.0",
@@ -183,7 +183,7 @@
"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",
@@ -199,11 +199,11 @@
},
"resolutions": {
"react-is": "^18.3.1",
- "@types/node": "^20.16.11"
+ "@types/node": "^20.16.14"
},
- "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 92d10aa52ebb..d9e6e09e97b9 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.16.14"
}
}
diff --git a/packages/x-charts-pro/package.json b/packages/x-charts-pro/package.json
index 946258e4fc7c..628ad50ae463 100644
--- a/packages/x-charts-pro/package.json
+++ b/packages/x-charts-pro/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-charts-pro",
- "version": "7.0.0-beta.4",
+ "version": "7.0.0-beta.5",
"description": "The Pro plan edition of the Charts components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
diff --git a/packages/x-charts-vendor/package.json b/packages/x-charts-vendor/package.json
index 79dd902e3dd1..cf9975eb676d 100644
--- a/packages/x-charts-vendor/package.json
+++ b/packages/x-charts-vendor/package.json
@@ -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 181b81b28723..02d47aedb6be 100644
--- a/packages/x-charts/package.json
+++ b/packages/x-charts/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-charts",
- "version": "7.20.0",
+ "version": "7.21.0",
"description": "The community edition of the Charts components (MUI X).",
"author": "MUI Team",
"main": "src/index.js",
diff --git a/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx
index 7278a105536f..24d575ca0095 100644
--- a/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx
+++ b/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx
@@ -20,7 +20,7 @@ export interface LegendRendererProps
series: FormattedSeries;
seriesToDisplay: LegendPerItemProps['itemsToDisplay'];
/**
- * @deprecated Use the `useDrawingArea` hook instead.
+ * @deprecated Use the `useDrawingArea()` hook instead.
*/
drawingArea: Omit
+
+ );
+ }
+
+ return descendantCount > 0 ? (
+
+
+ {cellContent}
+ {!hideDescendantCount && descendantCount > 0 ? (
+ ({descendantCount})
+ ) : null}
+
-
,
);
@@ -404,7 +393,6 @@ describe('