From c2f8067f47805c9a77080b0680c2d00dd6f5ea12 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 7 Nov 2024 09:11:50 +0100 Subject: [PATCH] [TreeView] Always apply the indentation on the item content instead of its parent's group (#15089) --- .../migration-tree-view-v7.md | 37 +++++++++++++++ .../customization/HeadlessAPI.js | 9 +--- .../customization/HeadlessAPI.tsx | 9 +--- .../rich-tree-view/ordering/DragAndDrop.js | 1 - .../rich-tree-view/ordering/DragAndDrop.tsx | 1 - .../ordering/DragAndDrop.tsx.preview | 1 - .../rich-tree-view/ordering/FileExplorer.js | 2 +- .../rich-tree-view/ordering/FileExplorer.tsx | 2 +- .../ordering/OnItemPositionChange.js | 1 - .../ordering/OnItemPositionChange.tsx | 1 - .../ordering/OnlyReorderFromDragHandle.js | 1 - .../ordering/OnlyReorderFromDragHandle.tsx | 1 - .../OnlyReorderFromDragHandle.tsx.preview | 1 - .../ordering/OnlyReorderInSameParent.js | 1 - .../ordering/OnlyReorderInSameParent.tsx | 1 - .../OnlyReorderInSameParent.tsx.preview | 1 - .../ordering/OnlyReorderLeaves.js | 1 - .../ordering/OnlyReorderLeaves.tsx | 1 - .../ordering/OnlyReorderLeaves.tsx.preview | 1 - .../ordering/SendAllItemsToServer.js | 1 - .../ordering/SendAllItemsToServer.tsx | 1 - .../rich-tree-view/ordering/ordering.md | 8 +--- .../customization/GmailTreeView.js | 15 ++---- .../customization/GmailTreeView.tsx | 15 ++---- .../customization/HeadlessAPI.js | 9 +--- .../customization/HeadlessAPI.tsx | 9 +--- .../tree-item-customization/ContentSlot.js | 2 +- .../tree-item-customization/ContentSlot.tsx | 2 +- .../CustomTreeItemDemo.js | 4 ++ .../CustomTreeItemDemo.tsx | 4 ++ .../IndentationAtItemLevel.js | 46 ------------------- .../IndentationAtItemLevel.tsx | 46 ------------------- .../IndentationAtItemLevel.tsx.preview | 5 -- .../tree-item-customization.md | 34 -------------- .../x/api/tree-view/rich-tree-view-pro.json | 5 +- .../pages/x/api/tree-view/rich-tree-view.json | 5 +- .../x/api/tree-view/simple-tree-view.json | 4 +- .../src/RichTreeViewPro/RichTreeViewPro.tsx | 1 - .../useTreeViewItemsReordering.test.tsx | 19 ++++---- .../useTreeViewItemsReordering.ts | 7 ++- .../src/RichTreeView/RichTreeView.tsx | 1 - .../src/SimpleTreeView/SimpleTreeView.tsx | 4 +- .../x-tree-view/src/TreeItem/TreeItem.tsx | 22 ++------- .../useTreeViewItems/useTreeViewItems.tsx | 2 - .../useTreeViewItems.types.ts | 8 +--- .../src/useTreeItem/useTreeItem.ts | 22 +++------ .../src/useTreeItem/useTreeItem.types.ts | 13 +----- test/utils/tree-view/fakeContextValue.ts | 1 - 48 files changed, 93 insertions(+), 295 deletions(-) delete mode 100644 docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.js delete mode 100644 docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx delete mode 100644 docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx.preview 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 index 53a4834232cb..e57862e0841c 100644 --- 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 @@ -225,3 +225,40 @@ All the new Tree Item-related components and utils (introduced in the previous m - } from '@mui/x-tree-view/TreeItem2LabelInput'; + } from '@mui/x-tree-view/TreeItemLabelInput'; ``` + +## Apply the indentation on the item content instead of it's parent's group + +The indentation of nested Tree Items is now applied on the content of the element. +This is required to support features like the drag and drop re-ordering which requires every Tree Item to go to the far left of the Tree View. + +### Apply custom indentation + +If you used to set custom indentation in your Tree Item, you can use the new `itemChildrenIndentation` prop to do it while supporting the new DOM structure: + +```tsx + +``` + +:::info +See [Tree Item Customization—Change nested item's indentation](/x/react-tree-view/tree-item-customization/#change-nested-items-indentation) for more details. +::: + +### Fallback to the old behavior + +If you used to style your content element (for example to add a border to it) and you don't use the drag and drop re-ordering, you can manually put the padding on the group transition element to restore the previous behavior: + +```tsx +const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({ + // Remove the additional padding of nested elements + padding: theme.spacing(0.5, 1), +})); + +const CustomTreeItemGroupTransition = styled(TreeItemGroupTransition)({ + // Add the padding back on the group transition element + paddingLeft: 'var(--TreeView-itemChildrenIndentation) !important', +}); +``` diff --git a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js index 5619fbf9b31d..172d7a1deaaf 100644 --- 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 ( - + @@ -77,7 +72,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { - + {children && } diff --git a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx index c4ac1965cf83..bccd2390df60 100644 --- 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, Omit, 'onFocus'> {} @@ -65,7 +60,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( return ( - + @@ -84,7 +79,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( - + {children && } diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.js b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.js index 7832e545034f..d860ccc28c25 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.js +++ b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.js @@ -41,7 +41,6 @@ export default function DragAndDrop() { itemsReordering defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} /> diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx index 1c59beb40bc9..2488fec4bb7f 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx +++ b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx @@ -41,7 +41,6 @@ export default function DragAndDrop() { itemsReordering defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} /> diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx.preview index b29cac8f227a..99bac1ee1936 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx.preview +++ b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx.preview @@ -3,7 +3,6 @@ itemsReordering defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} /> \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js index 423926095ed7..0e7bf9686ca8 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js +++ b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js @@ -247,7 +247,7 @@ export default function FileExplorer() { defaultExpandedItems={['1', '1.1']} sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} slots={{ item: CustomTreeItem }} - experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }} + experimentalFeatures={{ itemsReordering: true }} itemsReordering canMoveItemToNewPosition={(params) => { return ( diff --git a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx index 5f5a0434956b..ff08427f4691 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx +++ b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx @@ -279,7 +279,7 @@ export default function FileExplorer() { defaultExpandedItems={['1', '1.1']} sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} slots={{ item: CustomTreeItem }} - experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }} + experimentalFeatures={{ itemsReordering: true }} itemsReordering canMoveItemToNewPosition={(params) => { return ( diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.js b/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.js index c9cfef10d6a0..f1d3316d66cc 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.js +++ b/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.js @@ -45,7 +45,6 @@ export default function OnItemPositionChange() { items={MUI_X_PRODUCTS} itemsReordering experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} defaultExpandedItems={['grid', 'pickers']} diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.tsx index 52f5ff5474bc..38c581be44be 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.tsx +++ b/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.tsx @@ -53,7 +53,6 @@ export default function OnItemPositionChange() { items={MUI_X_PRODUCTS} itemsReordering experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} defaultExpandedItems={['grid', 'pickers']} diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js index 500411bd806c..6abae8742ed1 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js +++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js @@ -104,7 +104,6 @@ export default function OnlyReorderFromDragHandle() { items={MUI_X_PRODUCTS} defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} itemsReordering diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx index 8b0395890c15..bdf2378a6dbb 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx +++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx @@ -115,7 +115,6 @@ export default function OnlyReorderFromDragHandle() { items={MUI_X_PRODUCTS} defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} itemsReordering diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx.preview index 632176dce3e3..5a40bc839e4a 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx.preview +++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx.preview @@ -2,7 +2,6 @@ items={MUI_X_PRODUCTS} defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} itemsReordering diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.js b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.js index c105172ea3e9..1e2c55f5cc1f 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.js +++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.js @@ -41,7 +41,6 @@ export default function OnlyReorderInSameParent() { itemsReordering defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} canMoveItemToNewPosition={(params) => diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx index c69e56fdfde4..fe46dde05b86 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx +++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx @@ -41,7 +41,6 @@ export default function OnlyReorderInSameParent() { itemsReordering defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} canMoveItemToNewPosition={(params) => diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx.preview index 726c958558b1..e9536149b712 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx.preview +++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx.preview @@ -3,7 +3,6 @@ itemsReordering defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} canMoveItemToNewPosition={(params) => diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.js b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.js index ac3e351da44b..cb822f384b8c 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.js +++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.js @@ -44,7 +44,6 @@ export default function OnlyReorderLeaves() { itemsReordering defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} apiRef={apiRef} diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx index 551b2a805ef4..ed40b4f38557 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx +++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx @@ -44,7 +44,6 @@ export default function OnlyReorderLeaves() { itemsReordering defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} apiRef={apiRef} diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx.preview index 8057c22fe961..550d7e9f59de 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx.preview +++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx.preview @@ -3,7 +3,6 @@ itemsReordering defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} apiRef={apiRef} diff --git a/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.js b/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.js index 1481b77bb83d..9148d830f172 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.js +++ b/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.js @@ -70,7 +70,6 @@ export default function SendAllItemsToServer() { itemsReordering defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} onItemPositionChange={handleItemPositionChangeTreeViewA} diff --git a/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.tsx b/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.tsx index 6f39404daf70..8ea1ae392874 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.tsx +++ b/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.tsx @@ -70,7 +70,6 @@ export default function SendAllItemsToServer() { itemsReordering defaultExpandedItems={['grid', 'pickers']} experimentalFeatures={{ - indentationAtItemLevel: true, itemsReordering: true, }} onItemPositionChange={handleItemPositionChangeTreeViewA} diff --git a/docs/data/tree-view/rich-tree-view/ordering/ordering.md b/docs/data/tree-view/rich-tree-view/ordering/ordering.md index be62d10fd51b..9762fd60e1a9 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/ordering.md +++ b/docs/data/tree-view/rich-tree-view/ordering/ordering.md @@ -12,16 +12,12 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

Drag and drop your items to reorder them.

:::success -To be able to reorder items, you first have to enable the `indentationAtItemLevel` and the `itemsReordering` experimental features: +To be able to reorder items, you first have to enable the `itemsReordering` experimental feature: ```tsx - + ``` -See [Tree Item Customization—Apply the nested item's indentation at the item level](/x/react-tree-view/tree-item-customization/#apply-the-nested-items-indentation-at-the-item-level) for more details. ::: ## Enable drag & drop re-ordering diff --git a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js index b12875731714..da5c5eebb7f4 100644 --- a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js @@ -33,6 +33,7 @@ const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({ color: theme.palette.text.secondary, borderRadius: theme.spacing(2), paddingRight: theme.spacing(1), + paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`, fontWeight: theme.typography.fontWeightMedium, '&.expanded': { fontWeight: theme.typography.fontWeightRegular, @@ -50,15 +51,6 @@ const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => marginRight: theme.spacing(1), })); -const CustomTreeItemGroupTransition = styled(TreeItemGroupTransition)( - ({ theme }) => ({ - marginLeft: 0, - [`& .content`]: { - paddingLeft: theme.spacing(2), - }, - }), -); - const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { const theme = useTheme(); const { @@ -127,9 +119,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { - {children && ( - - )} + {children && } ); @@ -151,6 +141,7 @@ export default function GmailTreeView() { endIcon: EndIcon, }} sx={{ flexGrow: 1, maxWidth: 400 }} + itemChildrenIndentation={20} > diff --git a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx index c2c669a25182..88afa880de0b 100644 --- a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx @@ -51,6 +51,7 @@ const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({ color: theme.palette.text.secondary, borderRadius: theme.spacing(2), paddingRight: theme.spacing(1), + paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`, fontWeight: theme.typography.fontWeightMedium, '&.expanded': { fontWeight: theme.typography.fontWeightRegular, @@ -68,15 +69,6 @@ const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => marginRight: theme.spacing(1), })); -const CustomTreeItemGroupTransition = styled(TreeItemGroupTransition)( - ({ theme }) => ({ - marginLeft: 0, - [`& .content`]: { - paddingLeft: theme.spacing(2), - }, - }), -); - const CustomTreeItem = React.forwardRef(function CustomTreeItem( props: StyledTreeItemProps, ref: React.Ref, @@ -148,9 +140,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( - {children && ( - - )} + {children && } ); @@ -172,6 +162,7 @@ export default function GmailTreeView() { endIcon: EndIcon, }} sx={{ flexGrow: 1, maxWidth: 400 }} + itemChildrenIndentation={20} > diff --git a/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js index b8af5dff4380..a4f243569446 100644 --- a/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js +++ b/docs/data/tree-view/simple-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 { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; @@ -15,10 +14,6 @@ import { import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon'; import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider'; -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; @@ -35,7 +30,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { return ( - + @@ -53,7 +48,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { - + {children && } diff --git a/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.tsx b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.tsx index 42d5fa6e3768..10f47fe2aa3d 100644 --- a/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.tsx +++ b/docs/data/tree-view/simple-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 { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; @@ -15,10 +14,6 @@ import { import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon'; import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider'; -const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({ - padding: theme.spacing(0.5, 1), -})); - interface CustomTreeItemProps extends Omit, Omit, 'onFocus'> {} @@ -42,7 +37,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( return ( - + @@ -60,7 +55,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( - + {children && } diff --git a/docs/data/tree-view/tree-item-customization/ContentSlot.js b/docs/data/tree-view/tree-item-customization/ContentSlot.js index 5404af12ac70..abb0eebed644 100644 --- a/docs/data/tree-view/tree-item-customization/ContentSlot.js +++ b/docs/data/tree-view/tree-item-customization/ContentSlot.js @@ -8,8 +8,8 @@ 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', display: 'flex', '&:hover': { diff --git a/docs/data/tree-view/tree-item-customization/ContentSlot.tsx b/docs/data/tree-view/tree-item-customization/ContentSlot.tsx index 977001411de4..f1cac761d23e 100644 --- a/docs/data/tree-view/tree-item-customization/ContentSlot.tsx +++ b/docs/data/tree-view/tree-item-customization/ContentSlot.tsx @@ -8,8 +8,8 @@ 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', display: 'flex', '&:hover': { diff --git a/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.js b/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.js index 785462f87910..9a39125199f4 100644 --- a/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.js +++ b/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.js @@ -50,12 +50,14 @@ 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', @@ -63,6 +65,7 @@ const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => borderColor: theme.palette.primary.main, }, })); + const CustomTreeItemLabel = styled(TreeItemLabel)(({ theme }) => ({ borderRadius: theme.shape.borderRadius, border: '1px solid transparent', @@ -70,6 +73,7 @@ const CustomTreeItemLabel = styled(TreeItemLabel)(({ theme }) => ({ 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 index 3ca39800f5fc..9bdabdc0b93d 100644 --- a/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.tsx +++ b/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.tsx @@ -55,12 +55,14 @@ 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', @@ -68,6 +70,7 @@ const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => borderColor: theme.palette.primary.main, }, })); + const CustomTreeItemLabel = styled(TreeItemLabel)(({ theme }) => ({ borderRadius: theme.shape.borderRadius, border: '1px solid transparent', @@ -75,6 +78,7 @@ const CustomTreeItemLabel = styled(TreeItemLabel)(({ theme }) => ({ 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/IndentationAtItemLevel.js b/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.js deleted file mode 100644 index 6d5828aab1a2..000000000000 --- a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.js +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; - -import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; - -const MUI_X_PRODUCTS = [ - { - id: 'grid', - label: 'Data Grid', - children: [ - { id: 'grid-community', label: '@mui/x-data-grid' }, - { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, - { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, - ], - }, - { - id: 'pickers', - label: 'Date and Time Pickers', - children: [ - { id: 'pickers-community', label: '@mui/x-date-pickers' }, - { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, - ], - }, - { - id: 'charts', - label: 'Charts', - children: [{ id: 'charts-community', label: '@mui/x-charts' }], - }, - { - id: 'tree-view', - label: 'Tree View', - children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }], - }, -]; - -export default function IndentationAtItemLevel() { - return ( - - - - ); -} diff --git a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx b/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx deleted file mode 100644 index 804a3b540bd5..000000000000 --- a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { TreeViewBaseItem } from '@mui/x-tree-view/models'; -import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; - -const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ - { - id: 'grid', - label: 'Data Grid', - children: [ - { id: 'grid-community', label: '@mui/x-data-grid' }, - { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, - { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, - ], - }, - { - id: 'pickers', - label: 'Date and Time Pickers', - children: [ - { id: 'pickers-community', label: '@mui/x-date-pickers' }, - { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, - ], - }, - { - id: 'charts', - label: 'Charts', - children: [{ id: 'charts-community', label: '@mui/x-charts' }], - }, - { - id: 'tree-view', - label: 'Tree View', - children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }], - }, -]; - -export default function IndentationAtItemLevel() { - return ( - - - - ); -} diff --git a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx.preview b/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx.preview deleted file mode 100644 index 659fb32599af..000000000000 --- a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/tree-view/tree-item-customization/tree-item-customization.md b/docs/data/tree-view/tree-item-customization/tree-item-customization.md index 9d5600ce91ea..cee1fff2af65 100644 --- a/docs/data/tree-view/tree-item-customization/tree-item-customization.md +++ b/docs/data/tree-view/tree-item-customization/tree-item-customization.md @@ -82,40 +82,6 @@ By default, a nested item is indented by `12px` from its parent item. {{"demo": "ItemChildrenIndentationProp.js"}} -:::success -If you are using a custom Tree Item component, and you want to override the padding, -then apply the following padding to your `groupTransition` element: - -```ts -const CustomTreeItemGroupTransition = styled(TreeItemGroupTransition)(({ theme }) => ({ - // ...other styles - paddingLeft: `var(--TreeView-itemChildrenIndentation)`, -} -``` - -If you are using the `indentationAtItemLevel` prop, then instead apply the following padding to your `content` element: - -```ts -const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({ - // ...other styles - paddingLeft: - `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`, -} -``` - -::: - -### Apply the nested item's indentation at the item level - -By default, the indentation of nested items is applied by the `groupTransition` slot of its parent (i.e.: the DOM element that wraps all the children of a given item). -This approach is not compatible with upcoming features like the reordering of items using drag & drop. - -To apply the indentation at the item level (i.e.: have each item responsible for setting its own indentation using the `padding-left` CSS property on its `content` slot), -you can use the `indentationAtItemLevel` experimental feature. -It will become the default behavior in the next major version of the Tree View component. - -{{"demo": "IndentationAtItemLevel.js"}} - :::success If you are using a custom Tree Item component, and you want to override the padding, then apply the following padding to your `content` element: diff --git a/docs/pages/x/api/tree-view/rich-tree-view-pro.json b/docs/pages/x/api/tree-view/rich-tree-view-pro.json index 79efa8560520..2fcdf49e993d 100644 --- a/docs/pages/x/api/tree-view/rich-tree-view-pro.json +++ b/docs/pages/x/api/tree-view/rich-tree-view-pro.json @@ -29,10 +29,7 @@ "default": "'content'" }, "experimentalFeatures": { - "type": { - "name": "shape", - "description": "{ indentationAtItemLevel?: bool, itemsReordering?: bool, labelEditing?: bool }" - } + "type": { "name": "shape", "description": "{ itemsReordering?: bool, labelEditing?: bool }" } }, "getItemId": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/tree-view/rich-tree-view.json b/docs/pages/x/api/tree-view/rich-tree-view.json index 83ada41f5bc5..c5ca125dfd5d 100644 --- a/docs/pages/x/api/tree-view/rich-tree-view.json +++ b/docs/pages/x/api/tree-view/rich-tree-view.json @@ -21,10 +21,7 @@ "default": "'content'" }, "experimentalFeatures": { - "type": { - "name": "shape", - "description": "{ indentationAtItemLevel?: bool, labelEditing?: bool }" - } + "type": { "name": "shape", "description": "{ labelEditing?: bool }" } }, "getItemId": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/tree-view/simple-tree-view.json b/docs/pages/x/api/tree-view/simple-tree-view.json index bcf5153e9cb5..da75d42ee0b8 100644 --- a/docs/pages/x/api/tree-view/simple-tree-view.json +++ b/docs/pages/x/api/tree-view/simple-tree-view.json @@ -21,9 +21,7 @@ "type": { "name": "enum", "description": "'content'
| 'iconContainer'" }, "default": "'content'" }, - "experimentalFeatures": { - "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" } - }, + "experimentalFeatures": { "type": { "name": "object" } }, "id": { "type": { "name": "string" } }, "itemChildrenIndentation": { "type": { "name": "union", "description": "number
| string" }, diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx index d1cf77859bda..5f48c869de88 100644 --- a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx +++ b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx @@ -187,7 +187,6 @@ RichTreeViewPro.propTypes = { * the feature will be fully disabled and any property / method call will not have any effect. */ experimentalFeatures: PropTypes.shape({ - indentationAtItemLevel: PropTypes.bool, itemsReordering: PropTypes.bool, labelEditing: PropTypes.bool, }), diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx index 5aa7f23810fb..f414c28fa431 100644 --- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx +++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx @@ -77,7 +77,7 @@ describeTreeView< describe('itemReordering prop', () => { it('should allow to drag and drop items when props.itemsReordering={true}', () => { const view = render({ - experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, + experimentalFeatures: { itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, }); @@ -91,7 +91,7 @@ describeTreeView< it('should not allow to drag and drop items when props.itemsReordering={false}', () => { const view = render({ - experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, + experimentalFeatures: { itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: false, }); @@ -102,7 +102,6 @@ describeTreeView< it('should not allow to drag and drop items when props.itemsReordering is not defined', () => { const view = render({ - experimentalFeatures: { indentationAtItemLevel: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], }); @@ -112,7 +111,7 @@ describeTreeView< it('should allow to expand the new parent of the dragged item when it was not expandable before', () => { const view = render({ - experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, + experimentalFeatures: { itemsReordering: true }, items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], itemsReordering: true, defaultExpandedItems: ['1'], @@ -134,7 +133,7 @@ describeTreeView< it('should call onItemPositionChange when an item is moved', () => { const onItemPositionChange = spy(); const view = render({ - experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, + experimentalFeatures: { itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, onItemPositionChange, @@ -153,7 +152,7 @@ describeTreeView< describe('isItemReorderable prop', () => { it('should not allow to drag an item when isItemReorderable returns false', () => { const view = render({ - experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, + experimentalFeatures: { itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, isItemReorderable: () => false, @@ -165,7 +164,7 @@ describeTreeView< it('should allow to drag an item when isItemReorderable returns true', () => { const view = render({ - experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, + experimentalFeatures: { itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, isItemReorderable: () => true, @@ -183,7 +182,7 @@ describeTreeView< it('should call canMoveItemToNewPosition with the correct parameters', () => { const canMoveItemToNewPosition = spy(); const view = render({ - experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, + experimentalFeatures: { itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, canMoveItemToNewPosition, @@ -199,7 +198,7 @@ describeTreeView< it('should not allow to drop an item when canMoveItemToNewPosition returns false', () => { const view = render({ - experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, + experimentalFeatures: { itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, canMoveItemToNewPosition: () => false, @@ -211,7 +210,7 @@ describeTreeView< it('should allow to drop an item when canMoveItemToNewPosition returns true', () => { const view = render({ - experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, + experimentalFeatures: { itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, canMoveItemToNewPosition: () => true, diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts index fe0d7a8a29c6..45b8568da050 100644 --- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts +++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts @@ -249,14 +249,13 @@ export const useTreeViewItemsReordering: TreeViewPlugin { - const canUseFeature = - experimentalFeatures?.indentationAtItemLevel && experimentalFeatures?.itemsReordering; + const canUseFeature = experimentalFeatures?.itemsReordering; if (process.env.NODE_ENV !== 'production') { if (params.itemsReordering && !canUseFeature) { warnOnce([ - 'MUI X: The items reordering feature requires the `indentationAtItemLevel` and `itemsReordering` experimental features to be enabled.', - 'You can do it by passing `experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}` to the ``component.', + 'MUI X: The items reordering feature requires the `itemsReordering` experimental feature to be enabled.', + 'You can do it by passing `experimentalFeatures={{ itemsReordering: true }}` to the ``component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/', ]); } diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx index ccaccc5bcc78..158ac9ab8ea4 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx @@ -170,7 +170,6 @@ RichTreeView.propTypes = { * the feature will be fully disabled and any property / method call will not have any effect. */ experimentalFeatures: PropTypes.shape({ - indentationAtItemLevel: PropTypes.bool, labelEditing: PropTypes.bool, }), /** diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx index 5eb1c66c9cbb..2639ec86a8d3 100644 --- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx +++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx @@ -167,9 +167,7 @@ SimpleTreeView.propTypes = { * For each feature, if the flag is not explicitly set to `true`, * the feature will be fully disabled and any property / method call will not have any effect. */ - experimentalFeatures: PropTypes.shape({ - indentationAtItemLevel: PropTypes.bool, - }), + experimentalFeatures: PropTypes.object, /** * This prop is used to help implement the accessibility logic. * If you don't provide this prop. It falls back to a randomly generated id. diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index ce6e5c252b18..3f10accdbe42 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx @@ -40,10 +40,10 @@ export const TreeItemContent = styled('div', { name: 'MuiTreeItem', slot: 'Content', overridesResolver: (props, styles) => styles.content, - shouldForwardProp: (prop) => - shouldForwardProp(prop) && prop !== 'status' && prop !== 'indentationAtItemLevel', -})<{ status: UseTreeItemStatus; indentationAtItemLevel?: true }>(({ theme }) => ({ + shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'status', +})<{ status: UseTreeItemStatus }>(({ theme }) => ({ padding: theme.spacing(0.5, 1), + paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`, borderRadius: theme.shape.borderRadius, width: '100%', boxSizing: 'border-box', // prevent width + padding to overflow @@ -61,12 +61,6 @@ export const TreeItemContent = styled('div', { }, }, variants: [ - { - props: { indentationAtItemLevel: true }, - style: { - paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`, - }, - }, { props: ({ status }: UseTreeItemContentSlotOwnProps) => status.disabled, style: { @@ -155,17 +149,9 @@ export const TreeItemGroupTransition = styled(Collapse, { name: 'MuiTreeItem', slot: 'GroupTransition', overridesResolver: (props, styles) => styles.groupTransition, - shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'indentationAtItemLevel', -})<{ indentationAtItemLevel?: true }>({ +})({ margin: 0, padding: 0, - paddingLeft: 'var(--TreeView-itemChildrenIndentation)', - variants: [ - { - props: { indentationAtItemLevel: true }, - style: { paddingLeft: 0 }, - }, - ], }); export const TreeItemCheckbox = styled( diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.tsx index cd1112747d1f..83dcd7421083 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.tsx @@ -106,7 +106,6 @@ export const useTreeViewItems: TreeViewPlugin = ({ params, state, setState, - experimentalFeatures, }) => { const getItemMeta = React.useCallback( (itemId: string) => state.items.itemMetaMap[itemId], @@ -278,7 +277,6 @@ export const useTreeViewItems: TreeViewPlugin = ({ items: { onItemClick: params.onItemClick, disabledItemsFocusable: params.disabledItemsFocusable, - indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false, }, }, }; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts index ca325565752b..a27e8913c9bd 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts @@ -154,12 +154,7 @@ export interface UseTreeViewItemsState { } interface UseTreeViewItemsContextValue { - items: Pick< - UseTreeViewItemsDefaultizedParameters, - 'disabledItemsFocusable' | 'onItemClick' - > & { - indentationAtItemLevel: boolean; - }; + items: Pick, 'disabledItemsFocusable' | 'onItemClick'>; } export type UseTreeViewItemsSignature = TreeViewPluginSignature<{ @@ -170,7 +165,6 @@ export type UseTreeViewItemsSignature = TreeViewPluginSignature<{ events: UseTreeViewItemsEventLookup; state: UseTreeViewItemsState; contextValue: UseTreeViewItemsContextValue; - experimentalFeatures: 'indentationAtItemLevel'; }>; export type TreeViewItemMetaMap = { [itemId: string]: TreeViewItemMeta }; diff --git a/packages/x-tree-view/src/useTreeItem/useTreeItem.ts b/packages/x-tree-view/src/useTreeItem/useTreeItem.ts index 0492ddd182a2..cb5e07fbacaa 100644 --- a/packages/x-tree-view/src/useTreeItem/useTreeItem.ts +++ b/packages/x-tree-view/src/useTreeItem/useTreeItem.ts @@ -35,7 +35,7 @@ export const useTreeItem = < ): UseTreeItemReturnValue => { const { runItemPlugins, - items: { onItemClick, disabledItemsFocusable, indentationAtItemLevel }, + items: { onItemClick, disabledItemsFocusable }, selection: { disableSelection, checkboxSelection }, expansion: { expansionTrigger }, treeId, @@ -201,18 +201,16 @@ export const useTreeItem = < 'aria-selected': ariaSelected, 'aria-disabled': status.disabled || undefined, ...externalProps, + style: { + ...(externalProps.style ?? {}), + '--TreeView-itemDepth': + typeof depthContext === 'function' ? depthContext(itemId) : depthContext, + } as React.CSSProperties, onFocus: createRootHandleFocus(externalEventHandlers), onBlur: createRootHandleBlur(externalEventHandlers), onKeyDown: createRootHandleKeyDown(externalEventHandlers), }; - if (indentationAtItemLevel) { - props.style = { - '--TreeView-itemDepth': - typeof depthContext === 'function' ? depthContext(itemId) : depthContext, - } as React.CSSProperties; - } - const enhancedRootProps = propsEnhancers.root?.({ ...sharedPropsEnhancerParams, externalEventHandlers }) ?? {}; @@ -236,10 +234,6 @@ export const useTreeItem = < status, }; - if (indentationAtItemLevel) { - props.indentationAtItemLevel = true; - } - const enhancedContentProps = propsEnhancers.content?.({ ...sharedPropsEnhancerParams, externalEventHandlers }) ?? {}; @@ -337,10 +331,6 @@ export const useTreeItem = < ...externalProps, }; - if (indentationAtItemLevel) { - response.indentationAtItemLevel = true; - } - return response; }; diff --git a/packages/x-tree-view/src/useTreeItem/useTreeItem.types.ts b/packages/x-tree-view/src/useTreeItem/useTreeItem.types.ts index 07a29ab799f7..0fae841967eb 100644 --- a/packages/x-tree-view/src/useTreeItem/useTreeItem.types.ts +++ b/packages/x-tree-view/src/useTreeItem/useTreeItem.types.ts @@ -45,10 +45,7 @@ export interface UseTreeItemRootSlotPropsFromUseTreeItem { onBlur: TreeViewCancellableEventHandler>; onKeyDown: TreeViewCancellableEventHandler>; ref: React.RefCallback; - /** - * Only defined when the `indentationAtItemLevel` experimental feature is enabled. - */ - style?: React.CSSProperties; + style: React.CSSProperties; } export interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromUseTreeItem {} @@ -61,10 +58,6 @@ export interface UseTreeItemContentSlotPropsFromUseTreeItem { onMouseDown: TreeViewCancellableEventHandler; ref: React.RefCallback | null; status: UseTreeItemStatus; - /** - * Only defined when the `indentationAtItemLevel` experimental feature is enabled. - */ - indentationAtItemLevel?: true; } export interface UseTreeItemContentSlotOwnProps @@ -110,10 +103,6 @@ export interface UseTreeItemGroupTransitionSlotOwnProps { component: 'ul'; role: 'group'; children: React.ReactNode; - /** - * Only defined when the `indentationAtItemLevel` experimental feature is enabled. - */ - indentationAtItemLevel?: true; } export type UseTreeItemGroupTransitionSlotProps = ExternalProps & diff --git a/test/utils/tree-view/fakeContextValue.ts b/test/utils/tree-view/fakeContextValue.ts index 649fb121c4b2..b64e3cb6759f 100644 --- a/test/utils/tree-view/fakeContextValue.ts +++ b/test/utils/tree-view/fakeContextValue.ts @@ -31,7 +31,6 @@ export const getFakeContextValue = ( wrapRoot: ({ children }) => children, items: { disabledItemsFocusable: false, - indentationAtItemLevel: false, }, icons: { slots: {},