diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json index 7873eb960165c..33853fb02fb1e 100644 --- a/docs/pages/x/api/tree-view/tree-item.json +++ b/docs/pages/x/api/tree-view/tree-item.json @@ -5,9 +5,15 @@ "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "ContentComponent": { "type": { "name": "custom", "description": "element type" }, - "default": "TreeItemContent" + "default": "TreeItemContent", + "deprecated": true, + "deprecationInfo": "Consider using the TreeItem2 component or the useTreeItem2 hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/." + }, + "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/." }, - "ContentProps": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "label": { "type": { "name": "node" } }, "onFocus": { "type": { "name": "custom", "description": "unsupportedProp" } }, diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx index f893aec46d2ac..ff89ba1e4f88a 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx @@ -10,44 +10,6 @@ import { getFakeContextValue } from 'test/utils/tree-view/fakeContextValue'; describeTreeView<[]>('TreeItem component', ({ render, treeItemComponentName }) => { describe('ContentComponent / ContentProps props (TreeItem only)', () => { - it('should use the ContentComponent prop when defined', function test() { - if (treeItemComponentName === 'TreeItem2') { - this.skip(); - } - - const ContentComponent = React.forwardRef((props: any, ref: React.Ref) => ( -
- 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 }; /**