[TreeItem] Deprecate the ContentComponent and ContentProps props (#…

…14908)
mui · Oct 10, 2024 · f57e81b · f57e81b
1 parent 69dc394
commit f57e81b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 51 deletions.
diff --git 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 <code>TreeItem2</code> component or the <code>useTreeItem2</code> hook instead. For more detail, see <a href=\"https://mui.com/x/react-tree-view/tree-item-customization/\">https://mui.com/x/react-tree-view/tree-item-customization/</a>."
+    },
+    "ContentProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Consider using the <code>TreeItem2</code> component or the <code>useTreeItem2</code> hook instead. For more detail, see <a href=\"https://mui.com/x/react-tree-view/tree-item-customization/\">https://mui.com/x/react-tree-view/tree-item-customization/</a>."
     },
-    "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
@@ -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<HTMLDivElement>) => (
-        <div className={props.classes.root} ref={ref}>
-          MOCK CONTENT COMPONENT
-        </div>
-      ));
-
-      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<HTMLDivElement>) => (
-        <div className={props.classes.root} ref={ref}>
-          {props.customProp}
-        </div>
-      ));
-
-      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('<TreeItem />', () => {
         );
       }).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
@@ -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<TreeItemProps>(props);
   const rootRefObject = React.useRef<HTMLLIElement>(null);
   const contentRefObject = React.useRef<HTMLDivElement>(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
@@ -69,11 +69,13 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
   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<TreeItemContentProps>;
   /**
    * 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<HTMLElement> & { ref?: React.Ref<HTMLElement> };
   /**