[TreeView] Migrate to emotion (#25673)

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

@@ -24,7 +24,8 @@
     "onNodeToggle": { "type": { "name": "func" } },
     "selected": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;string" }
-    }
+    },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "TreeView",
   "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTreeView" },
@@ -33,6 +34,6 @@
   "filename": "/packages/material-ui-lab/src/TreeView/TreeView.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/tree-view/\">Tree View</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -17,7 +17,8 @@
     "onNodeFocus": "Callback fired when tree items are focused.<br><br><strong>Signature:</strong><br><code>function(event: object, value: string) =&gt; void</code><br><em>event:</em> The event source of the callback <strong>Warning</strong>: This is a generic event not a focus event.<br><em>value:</em> of the focused node.",
     "onNodeSelect": "Callback fired when tree items are selected/unselected.<br><br><strong>Signature:</strong><br><code>function(event: object, value: array \\| string) =&gt; void</code><br><em>event:</em> The event source of the callback<br><em>value:</em> of the selected nodes. When <code>multiSelect</code> is true this is an array of strings; when false (default) a string.",
     "onNodeToggle": "Callback fired when tree items are expanded/collapsed.<br><br><strong>Signature:</strong><br><code>function(event: object, nodeIds: array) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>nodeIds:</em> The ids of the expanded nodes.",
-    "selected": "Selected node ids. (Controlled) When <code>multiSelect</code> is true this takes an array of strings; when false (default) a string."
+    "selected": "Selected node ids. (Controlled) When <code>multiSelect</code> is true this takes an array of strings; when false (default) a string.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
 }

packages/material-ui-lab/src/TreeView/TreeView.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { InternalStandardProps as StandardProps } from '@material-ui/core';
+import { Theme } from '@material-ui/core/styles';
+import { SxProps } from '@material-ui/system';
 
 export interface TreeViewPropsBase extends StandardProps<React.HTMLAttributes<HTMLUListElement>> {
   /**
@@ -69,6 +71,10 @@ export interface TreeViewPropsBase extends StandardProps<React.HTMLAttributes<HT
    * @param {array} nodeIds The ids of the expanded nodes.
    */
   onNodeToggle?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export interface MultiSelectTreeViewProps extends TreeViewPropsBase {

packages/material-ui-lab/src/TreeView/TreeView.js

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { useTheme, withStyles } from '@material-ui/core/styles';
+import {
+  experimentalStyled,
+  useTheme,
+  unstable_useThemeProps as useThemeProps,
+} from '@material-ui/core/styles';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
 import {
   useControlled,
   useForkRef,
@@ -10,17 +15,35 @@ import {
 } from '@material-ui/core/utils';
 import TreeViewContext from './TreeViewContext';
 import { DescendantProvider } from './descendants';
+import { getTreeViewUtilityClass } from './treeViewClasses';
 
-export const styles = {
-  /* Styles applied to the root element. */
-  root: {
-    padding: 0,
-    margin: 0,
-    listStyle: 'none',
-    outline: 0,
-  },
+const overridesResolver = (props, styles) => styles.root || {};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes } = styleProps;
+
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, getTreeViewUtilityClass, classes);
 };
 
+const TreeViewRoot = experimentalStyled(
+  'ul',
+  {},
+  {
+    name: 'MuiTreeView',
+    slot: 'Root',
+    overridesResolver,
+  },
+)({
+  padding: 0,
+  margin: 0,
+  listStyle: 'none',
+  outline: 0,
+});
+
 function isPrintableCharacter(string) {
   return string && string.length === 1 && string.match(/\S/);
 }
@@ -41,10 +64,10 @@ function noopSelection() {
 const defaultDefaultExpanded = [];
 const defaultDefaultSelected = [];
 
-const TreeView = React.forwardRef(function TreeView(props, ref) {
+const TreeView = React.forwardRef(function TreeView(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiTreeView' });
   const {
     children,
-    classes,
     className,
     defaultCollapseIcon,
     defaultEndIcon,
@@ -66,6 +89,20 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
     selected: selectedProp,
     ...other
   } = props;
+  // use the `isRtl` from the props after the buildAPI script support it
+  const theme = useTheme();
+  const isRtl = theme.direction === 'rtl';
+
+  const styleProps = {
+    ...props,
+    defaultExpanded,
+    defaultSelected,
+    disabledItemsFocusable,
+    disableSelection,
+    multiSelect,
+  };
+
+  const classes = useUtilityClasses(styleProps);
 
   const treeId = useId(idProp);
 
@@ -74,8 +111,6 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
 
   const [focusedNodeId, setFocusedNodeId] = React.useState(null);
 
-  const theme = useTheme();
-
   const nodeMap = React.useRef({});
 
   const firstCharMap = React.useRef({});
@@ -677,14 +712,14 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
         flag = true;
         break;
       case 'ArrowRight':
-        if (theme.direction === 'rtl') {
+        if (isRtl) {
           flag = handlePreviousArrow(event);
         } else {
           flag = handleNextArrow(event);
         }
         break;
       case 'ArrowLeft':
-        if (theme.direction === 'rtl') {
+        if (isRtl) {
           flag = handleNextArrow(event);
         } else {
           flag = handlePreviousArrow(event);
@@ -786,7 +821,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
       }}
     >
       <DescendantProvider>
-        <ul
+        <TreeViewRoot
           role="tree"
           id={treeId}
           aria-activedescendant={activeDescendant}
@@ -797,10 +832,11 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
           onKeyDown={handleKeyDown}
           onFocus={handleFocus}
           onBlur={handleBlur}
+          styleProps={styleProps}
           {...other}
         >
           {children}
-        </ul>
+        </TreeViewRoot>
       </DescendantProvider>
     </TreeViewContext.Provider>
   );
@@ -915,6 +951,10 @@ TreeView.propTypes /* remove-proptypes */ = {
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
   selected: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiTreeView' })(TreeView);
+export default TreeView;

packages/material-ui-lab/src/TreeView/TreeView.test.js

@@ -7,29 +7,25 @@ import {
   ErrorBoundary,
   fireEvent,
   screen,
-  describeConformance,
-  getClasses,
+  describeConformanceV5,
   createMount,
 } from 'test/utils';
 import Portal from '@material-ui/core/Portal';
-import TreeView from './TreeView';
-import TreeItem from '../TreeItem';
+import TreeView, { treeViewClasses as classes } from '@material-ui/lab/TreeView';
+import TreeItem from '@material-ui/lab/TreeItem';
 
 describe('<TreeView />', () => {
-  let classes;
   const mount = createMount();
   const render = createClientRender();
 
-  before(() => {
-    classes = getClasses(<TreeView />);
-  });
-
-  describeConformance(<TreeView />, () => ({
+  describeConformanceV5(<TreeView />, () => ({
     classes,
     inheritComponent: 'ul',
+    render,
     mount,
     refInstanceof: window.HTMLUListElement,
-    skip: ['componentProp'],
+    muiName: 'MuiTreeView',
+    skip: ['componentProp', 'componentsProp', 'themeVariants'],
   }));
 
   describe('warnings', () => {

packages/material-ui-lab/src/TreeView/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './TreeView';
 export * from './TreeView';
+
+export { default as treeViewClasses } from './treeViewClasses';
+export * from './treeViewClasses';

packages/material-ui-lab/src/TreeView/index.js

@@ -1 +1,4 @@
 export { default } from './TreeView';
+
+export { default as treeViewClasses } from './treeViewClasses';
+export * from './treeViewClasses';

packages/material-ui-lab/src/TreeView/treeViewClasses.d.ts

@@ -0,0 +1,7 @@
+import { TreeViewClassKey } from './TreeView';
+
+declare const treeViewClasses: Record<TreeViewClassKey, string>;
+
+export function getTreeViewUtilityClass(slot: string): string;
+
+export default treeViewClasses;

packages/material-ui-lab/src/TreeView/treeViewClasses.js

@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getTreeViewUtilityClass(slot) {
+  return generateUtilityClass('MuiTreeView', slot);
+}
+
+const treeViewClasses = generateUtilityClasses('MuiTreeView', ['root']);
+
+export default treeViewClasses;