) => (
-
- MOCK CONTENT COMPONENT
-
- ));
-
- const view = render({
- items: [{ id: '1' }],
- slotProps: { item: { ContentComponent } },
- });
-
- expect(view.getItemContent('1').textContent).to.equal('MOCK CONTENT COMPONENT');
- });
-
- it('should use the ContentProps prop when defined', function test() {
- if (treeItemComponentName === 'TreeItem2') {
- this.skip();
- }
-
- const ContentComponent = React.forwardRef((props: any, ref: React.Ref) => (
-
- {props.customProp}
-
- ));
-
- const view = render({
- items: [{ id: '1' }],
- slotProps: { item: { ContentComponent, ContentProps: { customProp: 'ABCDEF' } as any } },
- });
-
- expect(view.getItemContent('1').textContent).to.equal('ABCDEF');
- });
-
it('should render TreeItem when itemId prop is escaping characters without throwing an error', function test() {
if (treeItemComponentName === 'TreeItem2') {
this.skip();
@@ -93,16 +55,5 @@ describe('', () => {
);
}).toErrorDev('Failed prop type: The prop `onFocus` is not supported.');
});
-
- it('should warn if an `ContentComponent` that does not hold a ref is used', () => {
- expect(() => {
- PropTypes.checkPropTypes(
- TreeItem.propTypes,
- { itemId: 'one', ContentComponent: () => {} },
- 'prop',
- 'TreeItem',
- );
- }).toErrorDev('Expected an element type that can hold a ref.');
- });
});
});
diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx
index e3f8de04e3412..6cc7d7cbec99c 100644
--- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx
+++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx
@@ -13,6 +13,7 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
import useSlotProps from '@mui/utils/useSlotProps';
import unsupportedProp from '@mui/utils/unsupportedProp';
import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
+import { warnOnce } from '@mui/x-internals/warning';
import { styled, createUseThemeProps } from '../internals/zero-styled';
import { TreeItemContent } from './TreeItemContent';
import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
@@ -236,6 +237,25 @@ export const TreeItem = React.forwardRef(function TreeItem(
handleSaveItemLabel,
} = useTreeItemState(itemId);
+ if (process.env.NODE_ENV !== 'production') {
+ // Checking directly the `props` to avoid having the default value applied
+ if (props.ContentComponent) {
+ warnOnce([
+ 'MUI X: The ContentComponent prop of the TreeItem component is deprecated and will be removed in the next major release.',
+ 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.',
+ 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.',
+ ]);
+ }
+
+ if (props.ContentProps) {
+ warnOnce([
+ 'MUI X: The ContentProps prop of the TreeItem component is deprecated and will be removed in the next major release.',
+ 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.',
+ 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.',
+ ]);
+ }
+ }
+
const { contentRef, rootRef, propsEnhancers } = runItemPlugins(props);
const rootRefObject = React.useRef(null);
const contentRefObject = React.useRef(null);
@@ -503,11 +523,13 @@ TreeItem.propTypes = {
className: PropTypes.string,
/**
* The component used to render the content of the item.
+ * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
* @default TreeItemContent
*/
ContentComponent: elementTypeAcceptingRef,
/**
* Props applied to ContentComponent.
+ * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
*/
ContentProps: PropTypes.object,
/**
diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts
index 41dcfe6960f5a..d8e49fc3cea58 100644
--- a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts
+++ b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts
@@ -69,11 +69,13 @@ export interface TreeItemProps extends Omit,
slotProps?: TreeItemSlotProps;
/**
* The component used to render the content of the item.
+ * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
* @default TreeItemContent
*/
ContentComponent?: React.JSXElementConstructor;
/**
* Props applied to ContentComponent.
+ * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
*/
ContentProps?: React.HTMLAttributes & { ref?: React.Ref };
/**