Move TreeView icons into the theme

packages/toolpad-studio/src/theme.ts

@@ -4,6 +4,8 @@ import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles';
 import type {} from '@mui/x-data-grid/themeAugmentation';
 import type {} from '@mui/x-data-grid-pro/themeAugmentation';
 import type {} from '@mui/x-tree-view/themeAugmentation';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
 declare module '@mui/material/styles/createPalette' {
   interface ColorRange {
@@ -923,6 +925,22 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen
           size: 'small',
         },
       },
+      MuiSimpleTreeView: {
+        defaultProps: {
+          slots: {
+            collapseIcon: ExpandMoreIcon,
+            expandIcon: ChevronRightIcon,
+          },
+          slotProps: {
+            collapseIcon: {
+              style: { fontSize: '0.9rem', opacity: 0.5 },
+            },
+            expandIcon: {
+              style: { fontSize: '0.9rem', opacity: 0.5 },
+            },
+          },
+        },
+      },
     },
   };
 }

packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx

@@ -3,8 +3,6 @@ import clsx from 'clsx';
 import { NodeId } from '@toolpad/studio-runtime';
 import { Box, Typography, styled, IconButton } from '@mui/material';
 import { SimpleTreeView, TreeItem, TreeItemProps, treeItemClasses } from '@mui/x-tree-view';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import useBoolean from '@toolpad/utils/hooks/useBoolean';
 import * as appDom from '@toolpad/studio-runtime/appDom';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -17,9 +15,6 @@ import EditableTreeItem, { EditableTreeItemProps } from '../../../components/Edi
 import ExplorerHeader from '../ExplorerHeader';
 import NodeMenu from '../NodeMenu';
 
-const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 });
-const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 });
-
 const classes = {
   treeItemMenuButton: 'Toolpad__HierarchyListItem',
   treeItemMenuOpen: 'Toolpad__HierarchyListItemMenuOpen',
@@ -296,8 +291,6 @@ export default function HierarchyExplorer() {
       <ExplorerHeader headerText="Page hierarchy" />
       <SimpleTreeView
         aria-label="Page hierarchy explorer"
-        // TODO: This belongs as a default property in the theme
-        slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }}
         expandedItems={Array.from(expandedDomNodeIdSet)}
         selectedItems={selectedDomNodeId}
         onSelectedItemsChange={handleNodeSelect}

packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx

@@ -16,8 +16,6 @@ import {
 import { SimpleTreeView, treeItemClasses } from '@mui/x-tree-view';
 import AddIcon from '@mui/icons-material/Add';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import useBoolean from '@toolpad/utils/hooks/useBoolean';
 import * as appDom from '@toolpad/studio-runtime/appDom';
 import dataSources from '../../../../toolpadDataSources/client';
@@ -27,9 +25,6 @@ import EditableTreeItem, { EditableTreeItemProps } from '../../../../components/
 import NodeMenu from '../../NodeMenu';
 import ExplorerHeader from '../../ExplorerHeader';
 
-const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 });
-const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 });
-
 const classes = {
   treeItemMenuButton: 'Toolpad__QueryListItem',
   treeItemMenuOpen: 'Toolpad__QueryListItemMenuOpen',
@@ -360,8 +355,6 @@ function Explorer({ nodes, setAnchorEl, nodeName, headerText }: ExplorerProps) {
             ? currentView.view.nodeId
             : ''
         }
-        // TODO: This belongs as a default property in the theme
-        slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }}
         sx={{
           flexGrow: 1,
           maxWidth: 400,

packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { styled, Box, IconButton, Stack, Tooltip } from '@mui/material';
 import { SimpleTreeView, treeItemClasses } from '@mui/x-tree-view';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { NodeId } from '@toolpad/studio-runtime';
 import clsx from 'clsx';
@@ -19,9 +17,6 @@ import EditableTreeItem, { EditableTreeItemProps } from '../../../components/Edi
 import { scrollIntoViewIfNeeded } from '../../../utils/dom';
 import ExplorerHeader from '../ExplorerHeader';
 
-const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 });
-const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 });
-
 const PagesExplorerRoot = styled(Stack)({
   height: '100%',
   width: '100%',
@@ -358,8 +353,6 @@ export default function PagesExplorer({ className }: PagesExplorerProps) {
         expandedItems={expanded}
         onExpandedItemsChange={handleToggle}
         multiSelect
-        // TODO: This belongs as a default property in the theme
-        slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }}
         sx={{
           overflow: 'auto',
           scrollbarGutter: 'stable',

packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx

@@ -17,8 +17,6 @@ import {
 } from '@mui/material';
 import { errorFrom } from '@toolpad/utils/errors';
 import { treeItemClasses, TreeItem, SimpleTreeView } from '@mui/x-tree-view';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import AddIcon from '@mui/icons-material/Add';
 import CloseIcon from '@mui/icons-material/Close';
 import JavascriptIcon from '@mui/icons-material/Javascript';
@@ -44,9 +42,6 @@ import ExplorerHeader from '../AppEditor/ExplorerHeader';
 import EditableTreeItem, { EditableTreeItemProps } from '../../components/EditableTreeItem';
 import { scrollIntoViewIfNeeded } from '../../utils/dom';
 
-const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 });
-const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 });
-
 const fileTreeItemClasses = generateUtilityClasses('FileTreeItem', ['actionButton', 'handlerItem']);
 
 const FileTreeItemRoot = styled(EditableTreeItem)(({ theme }) => ({
@@ -339,8 +334,6 @@ export default function FunctionsEditor() {
                 ref={handlerTreeRef}
                 selectedItems={selectedNodeId}
                 onSelectedItemsChange={handleSelectFunction}
-                // TODO: This belongs as a default property in the theme
-                slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }}
                 expandedItems={expanded}
                 onExpandedItemsChange={(_event, itemIds) => setExpanded(itemIds)}
                 sx={{