[tree view][docs] Adjust all demos height to account for the updated design

docs/data/data-grid/editing/ValidateServerNameGrid.js

@@ -23,13 +23,10 @@ function validateName(username) {
   const existingUsers = rows.map((row) => row.name.toLowerCase());
 
   return new Promise((resolve) => {
-    promiseTimeout = setTimeout(
-      () => {
-        const exists = existingUsers.includes(username.toLowerCase());
-        resolve(exists ? `${username} is already taken.` : null);
-      },
-      Math.random() * 500 + 100,
-    ); // simulate network latency
+    promiseTimeout = setTimeout(() => {
+      const exists = existingUsers.includes(username.toLowerCase());
+      resolve(exists ? `${username} is already taken.` : null);
+    }, Math.random() * 500 + 100); // simulate network latency
   });
 }
 

docs/data/data-grid/row-ordering/RowOrderingGrid.js

@@ -4,15 +4,12 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 
 function updateRowPosition(initialIndex, newIndex, rows) {
   return new Promise((resolve) => {
-    setTimeout(
-      () => {
-        const rowsClone = [...rows];
-        const row = rowsClone.splice(initialIndex, 1)[0];
-        rowsClone.splice(newIndex, 0, row);
-        resolve(rowsClone);
-      },
-      Math.random() * 500 + 100,
-    ); // simulate network latency
+    setTimeout(() => {
+      const rowsClone = [...rows];
+      const row = rowsClone.splice(initialIndex, 1)[0];
+      rowsClone.splice(newIndex, 0, row);
+      resolve(rowsClone);
+    }, Math.random() * 500 + 100); // simulate network latency
   });
 }
 

docs/data/data-grid/row-selection/ControlledSelectionServerPaginationGrid.js

@@ -4,12 +4,9 @@ import { useDemoData, randomInt } from '@mui/x-data-grid-generator';
 
 function loadServerRows(page, data) {
   return new Promise((resolve) => {
-    setTimeout(
-      () => {
-        resolve(data.rows.slice(page * 5, (page + 1) * 5));
-      },
-      randomInt(100, 600),
-    ); // simulate network latency
+    setTimeout(() => {
+      resolve(data.rows.slice(page * 5, (page + 1) * 5));
+    }, randomInt(100, 600)); // simulate network latency
   });
 }
 

docs/data/data-grid/tree-data/TreeDataLazyLoading.js

@@ -134,16 +134,13 @@ const getChildren = (parentPath) => {
  */
 const fakeDataFetcher = (parentPath = []) =>
   new Promise((resolve) => {
-    setTimeout(
-      () => {
-        const rows = getChildren(parentPath).map((row) => ({
-          ...row,
-          descendantCount: getChildren(row.hierarchy).length,
-        }));
-        resolve(rows);
-      },
-      500 + Math.random() * 300,
-    );
+    setTimeout(() => {
+      const rows = getChildren(parentPath).map((row) => ({
+        ...row,
+        descendantCount: getChildren(row.hierarchy).length,
+      }));
+      resolve(rows);
+    }, 500 + Math.random() * 300);
   });
 
 const LoadingContainer = styled('div')({

docs/data/date-pickers/lifecycle/ServerInteraction.js

@@ -24,8 +24,8 @@ function DisplayEvents(props) {
                 value === null
                   ? 'null'
                   : value.isValid()
-                    ? value.format('DD/MM/YYYY')
-                    : 'Invalid Date'
+                  ? value.format('DD/MM/YYYY')
+                  : 'Invalid Date'
               }`,
           )
           .join('\n')}

docs/data/tree-view/getting-started/FirstComponent.js

@@ -6,7 +6,7 @@ export default function FirstComponent() {
   return (
     <SimpleTreeView
       aria-label="file system navigator"
-      sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+      sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
     >
       <TreeItem nodeId="1" label="Applications">
         <TreeItem nodeId="2" label="Calendar" />

docs/data/tree-view/getting-started/FirstComponent.tsx

@@ -6,7 +6,7 @@ export default function FirstComponent() {
   return (
     <SimpleTreeView
       aria-label="file system navigator"
-      sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+      sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
     >
       <TreeItem nodeId="1" label="Applications">
         <TreeItem nodeId="2" label="Calendar" />

docs/data/tree-view/getting-started/FirstComponent.tsx.preview

@@ -1,6 +1,6 @@
 <SimpleTreeView
   aria-label="file system navigator"
-  sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+  sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
 >
   <TreeItem nodeId="1" label="Applications">
     <TreeItem nodeId="2" label="Calendar" />

docs/data/tree-view/overview/BasicRichTreeView.js

@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );

docs/data/tree-view/overview/BasicRichTreeView.tsx

@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );

docs/data/tree-view/overview/BasicSimpleTreeView.js

@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />

docs/data/tree-view/overview/BasicSimpleTreeView.tsx

@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />

docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js

@@ -67,7 +67,7 @@ export default function ControlledExpansion() {
           {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           expandedNodes={expandedNodes}

docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx

@@ -71,7 +71,7 @@ export default function ControlledExpansion() {
           {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           expandedNodes={expandedNodes}

docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview

@@ -3,7 +3,7 @@
     {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
   </Button>
 </Box>
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     expandedNodes={expandedNodes}

docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js

@@ -52,7 +52,7 @@ export default function TrackNodeExpansionToggle() {
         </Typography>
       )}
 
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeExpansionToggle={handleNodeExpansionToggle}

docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx

@@ -58,7 +58,7 @@ export default function TrackNodeExpansionToggle() {
           Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
         </Typography>
       )}
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeExpansionToggle={handleNodeExpansionToggle}

docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview

@@ -5,7 +5,7 @@
     Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
   </Typography>
 )}
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     onNodeExpansionToggle={handleNodeExpansionToggle}

docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js

@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx

@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js

@@ -66,7 +66,7 @@ export default function DisabledItemsFocusable() {
           label="Allow focusing disabled items"
         />
       </Box>
-      <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           isItemDisabled={isItemDisabled}

docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.tsx

@@ -72,7 +72,7 @@ export default function DisabledItemsFocusable() {
           label="Allow focusing disabled items"
         />
       </Box>
-      <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           isItemDisabled={isItemDisabled}

docs/data/tree-view/rich-tree-view/items/DisabledPropItem.js

@@ -46,7 +46,7 @@ const isItemDisabled = (item) => !!item.disabled;
 
 export default function DisabledPropItem() {
   return (
-    <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} isItemDisabled={isItemDisabled} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx

@@ -52,7 +52,7 @@ const isItemDisabled = (item: MuiXProduct) => !!item.disabled;
 
 export default function DisabledPropItem() {
   return (
-    <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} isItemDisabled={isItemDisabled} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/items/GetItemId.js

@@ -27,7 +27,7 @@ const getItemId = (item) => item.internalId;
 
 export default function GetItemId() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemId={getItemId} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/items/GetItemId.tsx

@@ -32,7 +32,7 @@ const getItemId = (item: MuiXProduct) => item.internalId;
 
 export default function GetItemId() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemId={getItemId} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/items/GetItemLabel.js

@@ -27,7 +27,7 @@ const getItemLabel = (item) => item.name;
 
 export default function GetItemLabel() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemLabel={getItemLabel} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx

@@ -32,7 +32,7 @@ const getItemLabel = (item: MuiXProduct) => item.name;
 
 export default function GetItemLabel() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemLabel={getItemLabel} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js

@@ -65,7 +65,7 @@ export default function ControlledSelection() {
           {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           selectedNodes={selectedNodes}

docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx

@@ -66,7 +66,7 @@ export default function ControlledSelection() {
           {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           selectedNodes={selectedNodes}

docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview

@@ -3,7 +3,7 @@
     {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
   </Button>
 </Box>
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     selectedNodes={selectedNodes}

docs/data/tree-view/rich-tree-view/selection/DisableSelection.js

@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView disableSelection items={MUI_X_PRODUCTS} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx

@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView disableSelection items={MUI_X_PRODUCTS} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js

@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView multiSelect items={MUI_X_PRODUCTS} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx

@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView multiSelect items={MUI_X_PRODUCTS} />
     </Box>
   );

docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.js

@@ -51,7 +51,7 @@ export default function TrackNodeSelectionToggle() {
           ? 'No node selection recorded'
           : `Last selected node: ${lastSelectedNode}`}
       </Typography>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeSelectionToggle={handleNodeSelectionToggle}

docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx

@@ -57,7 +57,7 @@ export default function TrackNodeSelectionToggle() {
           ? 'No node selection recorded'
           : `Last selected node: ${lastSelectedNode}`}
       </Typography>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeSelectionToggle={handleNodeSelectionToggle}

docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx.preview

@@ -3,7 +3,7 @@
     ? 'No node selection recorded'
     : `Last selected node: ${lastSelectedNode}`}
 </Typography>
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     onNodeSelectionToggle={handleNodeSelectionToggle}

docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js

@@ -38,7 +38,7 @@ export default function ControlledExpansion() {
           {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView
           expandedNodes={expandedNodes}
           onExpandedNodesChange={handleExpandedNodesChange}