From 68ef16f2b019b7639d4751786eec2b678d548867 Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 24 Oct 2024 14:23:38 +0200 Subject: [PATCH] [TreeView] Always apply the indentation at the item level instead of the group level --- .../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 | 7 +-- .../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 +- docs/pages/x/api/tree-view/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 ++------- .../x-tree-view/src/TreeView/TreeView.tsx | 4 +- .../useTreeViewItems/useTreeViewItems.tsx | 1 - .../useTreeViewItems.types.ts | 8 +--- .../src/useTreeItem/useTreeItem.ts | 21 ++------- .../src/useTreeItem/useTreeItem.types.ts | 13 +----- test/utils/tree-view/fakeContextValue.ts | 1 - 39 files changed, 33 insertions(+), 245 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/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..c52e8c05fd9a 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/ordering.md +++ b/docs/data/tree-view/rich-tree-view/ordering/ordering.md @@ -12,13 +12,10 @@ 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. 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/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json index c9f0691c2b7b..d5045553af05 100644 --- a/docs/pages/x/api/tree-view/tree-view.json +++ b/docs/pages/x/api/tree-view/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/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx index 06be3ecba63a..b154e5977273 100644 --- a/packages/x-tree-view/src/TreeView/TreeView.tsx +++ b/packages/x-tree-view/src/TreeView/TreeView.tsx @@ -154,9 +154,7 @@ TreeView.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/internals/plugins/useTreeViewItems/useTreeViewItems.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.tsx index cd1112747d1f..d6c5e46decb6 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.tsx @@ -278,7 +278,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 864fc7c3c5ba..83f6718c6cf1 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 @@ -153,12 +153,7 @@ export interface UseTreeViewItemsState { } interface UseTreeViewItemsContextValue { - items: Pick< - UseTreeViewItemsDefaultizedParameters, - 'disabledItemsFocusable' | 'onItemClick' - > & { - indentationAtItemLevel: boolean; - }; + items: Pick, 'disabledItemsFocusable' | 'onItemClick'>; } export type UseTreeViewItemsSignature = TreeViewPluginSignature<{ @@ -169,7 +164,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..0580758399dd 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, @@ -200,19 +200,16 @@ export const useTreeItem = < 'aria-expanded': status.expandable ? status.expanded : undefined, 'aria-selected': ariaSelected, 'aria-disabled': status.disabled || undefined, + style: { + '--TreeView-itemDepth': + typeof depthContext === 'function' ? depthContext(itemId) : depthContext, + } as React.CSSProperties, ...externalProps, 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 +233,6 @@ export const useTreeItem = < status, }; - if (indentationAtItemLevel) { - props.indentationAtItemLevel = true; - } - const enhancedContentProps = propsEnhancers.content?.({ ...sharedPropsEnhancerParams, externalEventHandlers }) ?? {}; @@ -337,10 +330,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: {},