Merge branch 'master' into tree-item-indentation

mui · Oct 24, 2024 · 18507bd · 18507bd
2 parents 9292505 + a6ba74f
commit 18507bd
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 18 deletions.
diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -12,11 +12,11 @@ This is a reference guide for upgrading `@mui/x-date-pickers` from v7 to v8.
 
 ## Start using the new release
 
-In `package.json`, change the version of the date pickers package to `^8.0.0`.
+In `package.json`, change the version of the date pickers package to `next`.
 
 ```diff
 -"@mui/x-date-pickers": "7.x.x",
-+"@mui/x-date-pickers": "^8.0.0",
++"@mui/x-date-pickers": "next",
 ```
 
 Since `v8` is a major release, it contains changes that affect the public API.

diff --git a/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md b/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
@@ -12,11 +12,11 @@ This is a reference guide for upgrading `@mui/x-tree-view` from v7 to v8.
 
 ## Start using the new release
 
-In `package.json`, change the version of the Tree View package to `^8.0.0`.
+In `package.json`, change the version of the Tree View package to `next`.
 
 ```diff
 -"@mui/x-tree-view": "7.x.x",
-+"@mui/x-tree-view": "^8.0.0",
++"@mui/x-tree-view": "next",
 ```
 
 Since `v8` is a major release, it contains changes that affect the public API.

diff --git a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Avatar from '@mui/material/Avatar';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
@@ -37,10 +36,6 @@ const ITEMS = [
   },
 ];
 
-const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
-  padding: theme.spacing(0.5, 1),
-}));
-
 const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
   const { id, itemId, label, disabled, children, ...other } = props;
 
@@ -58,7 +53,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
   return (
     <TreeItemProvider itemId={itemId}>
       <TreeItemRoot {...getRootProps(other)}>
-        <CustomTreeItemContent {...getContentProps()}>
+        <TreeItemContent {...getContentProps()}>
           <TreeItemIconContainer {...getIconContainerProps()}>
             <TreeItemIcon status={status} />
           </TreeItemIconContainer>
@@ -77,7 +72,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
             <TreeItemLabel {...getLabelProps()} />
           </Box>
           <TreeItemDragAndDropOverlay {...getDragAndDropOverlayProps()} />
-        </CustomTreeItemContent>
+        </TreeItemContent>
         {children && <TreeItemGroupTransition {...getGroupTransitionProps()} />}
       </TreeItemRoot>
     </TreeItemProvider>

diff --git a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Avatar from '@mui/material/Avatar';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
@@ -37,10 +36,6 @@ const ITEMS: TreeViewBaseItem[] = [
   },
 ];
 
-const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
-  padding: theme.spacing(0.5, 1),
-}));
-
 interface CustomTreeItemProps
   extends Omit<UseTreeItemParameters, 'rootRef'>,
     Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {}
@@ -65,7 +60,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
   return (
     <TreeItemProvider itemId={itemId}>
       <TreeItemRoot {...getRootProps(other)}>
-        <CustomTreeItemContent {...getContentProps()}>
+        <TreeItemContent {...getContentProps()}>
           <TreeItemIconContainer {...getIconContainerProps()}>
             <TreeItemIcon status={status} />
           </TreeItemIconContainer>
@@ -84,7 +79,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
             <TreeItemLabel {...getLabelProps()} />
           </Box>
           <TreeItemDragAndDropOverlay {...getDragAndDropOverlayProps()} />
-        </CustomTreeItemContent>
+        </TreeItemContent>
         {children && <TreeItemGroupTransition {...getGroupTransitionProps()} />}
       </TreeItemRoot>
     </TreeItemProvider>

diff --git a/docs/data/tree-view/tree-item-customization/ContentSlot.js b/docs/data/tree-view/tree-item-customization/ContentSlot.js
@@ -8,6 +8,7 @@ import { MUI_X_PRODUCTS } from './products';
 
 const CustomContent = styled('div')(({ theme }) => ({
   padding: theme.spacing(0.5, 1),
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
   borderRadius: theme.shape.borderRadius,
   width: '100%',
   border: '1px solid',

diff --git a/docs/data/tree-view/tree-item-customization/ContentSlot.tsx b/docs/data/tree-view/tree-item-customization/ContentSlot.tsx
@@ -8,6 +8,7 @@ import { MUI_X_PRODUCTS } from './products';
 
 const CustomContent = styled('div')(({ theme }) => ({
   padding: theme.spacing(0.5, 1),
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
   borderRadius: theme.shape.borderRadius,
   width: '100%',
   border: '1px solid',

diff --git a/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.js b/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.js
@@ -50,26 +50,30 @@ const CustomTreeItemLabelInput = styled(TreeItemLabelInput)(({ theme }) => ({
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
   border: '1px solid transparent',
   '&:hover:not(:has(:hover))': {
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',
   '&:hover': {
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemLabel = styled(TreeItemLabel)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',
   '&:hover': {
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemCheckbox = styled(TreeItemCheckbox)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',

diff --git a/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.tsx b/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.tsx
@@ -55,26 +55,30 @@ const CustomTreeItemLabelInput = styled(TreeItemLabelInput)(({ theme }) => ({
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
   border: '1px solid transparent',
   '&:hover:not(:has(:hover))': {
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',
   '&:hover': {
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemLabel = styled(TreeItemLabel)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',
   '&:hover': {
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemCheckbox = styled(TreeItemCheckbox)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',