[TreeView] Improve props typing (#9855)

docs/pages/x/api/tree-view/tree-item.json

@@ -3,6 +3,7 @@
     "nodeId": { "type": { "name": "string" }, "required": true },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalPropsInfo": { "classes": true } },
+    "className": { "type": { "name": "string" } },
     "collapseIcon": { "type": { "name": "node" } },
     "ContentComponent": {
       "type": { "name": "custom", "description": "element type" },

docs/pages/x/api/tree-view/tree-view.json

@@ -2,6 +2,7 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalPropsInfo": { "classes": true } },
+    "className": { "type": { "name": "string" } },
     "defaultCollapseIcon": { "type": { "name": "node" } },
     "defaultEndIcon": { "type": { "name": "node" } },
     "defaultExpanded": {

docs/translations/api-docs/tree-view/tree-item.json

@@ -11,6 +11,11 @@
       "deprecated": "",
       "typeDescriptions": {}
     },
+    "className": {
+      "description": "className applied to the root element.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
     "collapseIcon": {
       "description": "The icon used to collapse the node.",
       "deprecated": "",
@@ -23,7 +28,7 @@
       "typeDescriptions": {}
     },
     "ContentProps": {
-      "description": "Props applied to ContentComponent",
+      "description": "Props applied to ContentComponent.",
       "deprecated": "",
       "typeDescriptions": {}
     },
@@ -33,7 +38,7 @@
       "typeDescriptions": {}
     },
     "endIcon": {
-      "description": "The icon displayed next to a end node.",
+      "description": "The icon displayed next to an end node.",
       "deprecated": "",
       "typeDescriptions": {}
     },

docs/translations/api-docs/tree-view/tree-view.json

@@ -11,6 +11,11 @@
       "deprecated": "",
       "typeDescriptions": {}
     },
+    "className": {
+      "description": "className applied to the root element.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
     "defaultCollapseIcon": {
       "description": "The default icon used to collapse the node.",
       "deprecated": "",
@@ -22,7 +27,7 @@
       "typeDescriptions": {}
     },
     "defaultExpanded": {
-      "description": "Expanded node ids. (Uncontrolled)",
+      "description": "Expanded node ids. Used when the item's expansion are not controlled.",
       "deprecated": "",
       "typeDescriptions": {}
     },
@@ -52,7 +57,7 @@
       "typeDescriptions": {}
     },
     "expanded": {
-      "description": "Expanded node ids. (Controlled)",
+      "description": "Expanded node ids. Used when the item's expansion are controlled.",
       "deprecated": "",
       "typeDescriptions": {}
     },

packages/x-tree-view/src/TreeItem/TreeItem.tsx

@@ -12,7 +12,7 @@ import { TreeViewContext } from '../TreeView/TreeViewContext';
 import { DescendantProvider, TreeItemDescendant, useDescendant } from '../TreeView/descendants';
 import { TreeItemContent } from './TreeItemContent';
 import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
-import { TreeItemOwnerState, TreeItemProps } from './TreeItem.interface';
+import { TreeItemOwnerState, TreeItemProps } from './TreeItem.types';
 
 const useUtilityClasses = (ownerState: TreeItemOwnerState) => {
   const { classes } = ownerState;
@@ -372,6 +372,10 @@ TreeItem.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * className applied to the root element.
+   */
+  className: PropTypes.string,
   /**
    * The icon used to collapse the node.
    */
@@ -382,7 +386,7 @@ TreeItem.propTypes = {
    */
   ContentComponent: elementTypeAcceptingRef,
   /**
-   * Props applied to ContentComponent
+   * Props applied to ContentComponent.
    */
   ContentProps: PropTypes.object,
   /**
@@ -391,7 +395,7 @@ TreeItem.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * The icon displayed next to a end node.
+   * The icon displayed next to an end node.
    */
   endIcon: PropTypes.node,
   /**

packages/x-tree-view/src/TreeItem/TreeItem.interface.ts → packages/x-tree-view/src/TreeItem/TreeItem.types.ts

@@ -4,14 +4,16 @@ import { TransitionProps } from '@mui/material/transitions';
 import { SxProps } from '@mui/system';
 import { TreeItemContentProps } from './TreeItemContent';
 import { TreeItemClasses } from './treeItemClasses';
-import { StandardProps } from '../internals/models';
 
-export interface TreeItemProps
-  extends StandardProps<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
+export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
   /**
    * The content of the component.
    */
   children?: React.ReactNode;
+  /**
+   * className applied to the root element.
+   */
+  className?: string;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -26,7 +28,7 @@ export interface TreeItemProps
    */
   ContentComponent?: React.JSXElementConstructor<TreeItemContentProps>;
   /**
-   * Props applied to ContentComponent
+   * Props applied to ContentComponent.
    */
   ContentProps?: React.HTMLAttributes<HTMLElement>;
   /**
@@ -35,7 +37,7 @@ export interface TreeItemProps
    */
   disabled?: boolean;
   /**
-   * The icon displayed next to a end node.
+   * The icon displayed next to an end node.
    */
   endIcon?: React.ReactNode;
   /**

packages/x-tree-view/src/TreeItem/TreeItemContent.tsx

@@ -2,9 +2,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useTreeItem } from './useTreeItem';
-import { StandardProps } from '../internals/models';
 
-export interface TreeItemContentProps extends StandardProps<React.HTMLAttributes<HTMLElement>> {
+export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * className applied to the root element.
    */

packages/x-tree-view/src/TreeItem/index.ts

@@ -1,5 +1,5 @@
 export * from './TreeItem';
-export type { TreeItemProps } from './TreeItem.interface';
+export type { TreeItemProps } from './TreeItem.types';
 export * from './useTreeItem';
 export * from './treeItemClasses';
 export type { TreeItemContentProps } from './TreeItemContent';

packages/x-tree-view/src/TreeView/TreeView.tsx

@@ -891,6 +891,10 @@ TreeView.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * className applied to the root element.
+   */
+  className: PropTypes.string,
   /**
    * The default icon used to collapse the node.
    */
@@ -901,7 +905,8 @@ TreeView.propTypes = {
    */
   defaultEndIcon: PropTypes.node,
   /**
-   * Expanded node ids. (Uncontrolled)
+   * Expanded node ids.
+   * Used when the item's expansion are not controlled.
    * @default []
    */
   defaultExpanded: PropTypes.arrayOf(PropTypes.string),
@@ -931,7 +936,8 @@ TreeView.propTypes = {
    */
   disableSelection: PropTypes.bool,
   /**
-   * Expanded node ids. (Controlled)
+   * Expanded node ids.
+   * Used when the item's expansion are controlled.
    */
   expanded: PropTypes.arrayOf(PropTypes.string),
   /**

packages/x-tree-view/src/TreeView/TreeView.types.ts

@@ -1,14 +1,18 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
-import { DefaultizedProps, StandardProps } from '../internals/models';
+import { DefaultizedProps } from '../internals/models';
 import { TreeViewClasses } from './treeViewClasses';
 
-export interface TreeViewPropsBase extends StandardProps<React.HTMLAttributes<HTMLUListElement>> {
+export interface TreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
   /**
    * The content of the component.
    */
   children?: React.ReactNode;
+  /**
+   * className applied to the root element.
+   */
+  className?: string;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -23,7 +27,8 @@ export interface TreeViewPropsBase extends StandardProps<React.HTMLAttributes<HT
    */
   defaultEndIcon?: React.ReactNode;
   /**
-   * Expanded node ids. (Uncontrolled)
+   * Expanded node ids.
+   * Used when the item's expansion are not controlled.
    * @default []
    */
   defaultExpanded?: string[];
@@ -47,7 +52,8 @@ export interface TreeViewPropsBase extends StandardProps<React.HTMLAttributes<HT
    */
   disableSelection?: boolean;
   /**
-   * Expanded node ids. (Controlled)
+   * Expanded node ids.
+   * Used when the item's expansion are controlled.
    */
   expanded?: string[];
   /**

packages/x-tree-view/src/internals/models.ts

@@ -1,26 +1,3 @@
-import * as React from 'react';
-import { StyledComponentProps } from '@mui/material/styles';
-
-/**
- * Remove properties `K` from `T`.
- * Distributive for union types.
- *
- * @internal
- */
-export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
-
-export type StandardProps<C, Removals extends keyof C = never> = DistributiveOmit<
-  C,
-  'classes' | Removals
-> &
-  // each component declares it's classes in a separate interface for proper JSDoc
-  StyledComponentProps<never> & {
-    ref?: C extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;
-    // TODO: Remove implicit props. Up to each component.
-    className?: string;
-    style?: React.CSSProperties;
-  };
-
 export type DefaultizedProps<
   P extends {},
   RequiredProps extends keyof P,