From 63033c6450349546f881d71cf33270dda9a2fb03 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Tue, 10 Sep 2024 18:03:22 +0200 Subject: [PATCH] [TreeView] Make `useTreeItem2` stable (#14498) --- .../tree-view/rich-tree-view/customization/FileExplorer.js | 2 +- .../rich-tree-view/customization/FileExplorer.tsx | 5 +---- .../tree-view/rich-tree-view/customization/HeadlessAPI.js | 2 +- .../tree-view/rich-tree-view/customization/HeadlessAPI.tsx | 5 +---- .../tree-view/rich-tree-view/editing/CustomLabelInput.js | 2 +- .../tree-view/rich-tree-view/editing/CustomLabelInput.tsx | 2 +- .../data/tree-view/rich-tree-view/ordering/FileExplorer.js | 2 +- .../tree-view/rich-tree-view/ordering/FileExplorer.tsx | 5 +---- .../rich-tree-view/ordering/OnlyReorderFromDragHandle.js | 2 +- .../rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx | 5 +---- .../simple-tree-view/customization/GmailTreeView.js | 4 ++-- .../simple-tree-view/customization/GmailTreeView.tsx | 7 ++----- .../simple-tree-view/customization/HeadlessAPI.js | 2 +- .../simple-tree-view/customization/HeadlessAPI.tsx | 5 +---- packages/x-tree-view/src/TreeItem2/TreeItem2.tsx | 2 +- packages/x-tree-view/src/useTreeItem2/index.ts | 7 ++++++- scripts/x-tree-view-pro.exports.json | 1 + scripts/x-tree-view.exports.json | 1 + 18 files changed, 25 insertions(+), 36 deletions(-) diff --git a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js index 45d30698d9307..305d77fc61a39 100644 --- a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js +++ b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js @@ -15,7 +15,7 @@ import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf'; import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBack'; import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; import { treeItemClasses } from '@mui/x-tree-view/TreeItem'; -import { unstable_useTreeItem2 as useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Checkbox, TreeItem2Content, diff --git a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx index 70cb94cbb040b..6711c554ba9d6 100644 --- a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx +++ b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx @@ -15,10 +15,7 @@ import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf'; import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBack'; import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; import { treeItemClasses } from '@mui/x-tree-view/TreeItem'; -import { - unstable_useTreeItem2 as useTreeItem2, - UseTreeItem2Parameters, -} from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2, UseTreeItem2Parameters } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Checkbox, TreeItem2Content, 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 1fa00ed8698b5..afb1f90aec17a 100644 --- a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js +++ b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js @@ -4,7 +4,7 @@ import Box from '@mui/material/Box'; import Avatar from '@mui/material/Avatar'; import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; -import { unstable_useTreeItem2 as useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Content, TreeItem2IconContainer, 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 75533393d5283..d07cd21249f84 100644 --- a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx +++ b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx @@ -4,10 +4,7 @@ import Box from '@mui/material/Box'; import Avatar from '@mui/material/Avatar'; import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; import { TreeViewBaseItem } from '@mui/x-tree-view/models'; -import { - unstable_useTreeItem2 as useTreeItem2, - UseTreeItem2Parameters, -} from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2, UseTreeItem2Parameters } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Content, TreeItem2IconContainer, diff --git a/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.js b/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.js index 85ac9e0ba6b15..78c6e7f22360a 100644 --- a/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.js +++ b/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.js @@ -6,7 +6,7 @@ import IconButton from '@mui/material/IconButton'; import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; import CloseRoundedIcon from '@mui/icons-material/CloseRounded'; import { TreeItem2, TreeItem2Label } from '@mui/x-tree-view/TreeItem2'; -import { unstable_useTreeItem2 as useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; import { useTreeItem2Utils } from '@mui/x-tree-view/hooks'; const StyledLabelInput = styled('input')(({ theme }) => ({ diff --git a/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.tsx b/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.tsx index 961a87baff103..983bfc12e399c 100644 --- a/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.tsx +++ b/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.tsx @@ -13,7 +13,7 @@ import { import { UseTreeItem2LabelInputSlotOwnProps, UseTreeItem2LabelSlotOwnProps, - unstable_useTreeItem2 as useTreeItem2, + useTreeItem2, } from '@mui/x-tree-view/useTreeItem2'; import { useTreeItem2Utils } from '@mui/x-tree-view/hooks'; import { TreeViewBaseItem } from '@mui/x-tree-view/models'; 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 a072303ff3d2b..9a05f402be2c8 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js +++ b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js @@ -11,7 +11,7 @@ import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf'; import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBack'; import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro'; import { treeItemClasses } from '@mui/x-tree-view/TreeItem'; -import { unstable_useTreeItem2 as useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Checkbox, TreeItem2Content, 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 0a93f04cea63e..f555c2afd64b8 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx +++ b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx @@ -11,10 +11,7 @@ import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf'; import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBack'; import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro'; import { treeItemClasses } from '@mui/x-tree-view/TreeItem'; -import { - unstable_useTreeItem2 as useTreeItem2, - UseTreeItem2Parameters, -} from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2, UseTreeItem2Parameters } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Checkbox, TreeItem2Content, 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 8aa17d6dd5a2b..c9f03403a38fb 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js +++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js @@ -3,7 +3,7 @@ import Box from '@mui/material/Box'; import DragIndicatorIcon from '@mui/icons-material/DragIndicator'; import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro'; -import { unstable_useTreeItem2 as useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Content, TreeItem2IconContainer, 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 d01d81f8f4c37..8780d381c49bf 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx +++ b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx @@ -3,10 +3,7 @@ import Box from '@mui/material/Box'; import DragIndicatorIcon from '@mui/icons-material/DragIndicator'; import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro'; import { TreeViewBaseItem } from '@mui/x-tree-view/models'; -import { - unstable_useTreeItem2 as useTreeItem2, - UseTreeItem2Parameters, -} from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2, UseTreeItem2Parameters } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Content, TreeItem2IconContainer, 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 078d26889f44e..7dc64dbbe9b04 100644 --- a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js @@ -20,7 +20,7 @@ import { TreeItem2Root, TreeItem2GroupTransition, } from '@mui/x-tree-view/TreeItem2'; -import { unstable_useTreeItem2 as useTreeItem } from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider'; import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon'; @@ -83,7 +83,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { getLabelProps, getGroupTransitionProps, status, - } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref }); + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); const style = { '--tree-view-color': theme.palette.mode !== 'dark' ? color : colorForDarkMode, 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 59274dac58397..88d4d92db4535 100644 --- a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx @@ -20,10 +20,7 @@ import { TreeItem2Root, TreeItem2GroupTransition, } from '@mui/x-tree-view/TreeItem2'; -import { - unstable_useTreeItem2 as useTreeItem, - UseTreeItem2Parameters, -} from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2, UseTreeItem2Parameters } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider'; import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon'; @@ -107,7 +104,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( getLabelProps, getGroupTransitionProps, status, - } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref }); + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); const style = { '--tree-view-color': theme.palette.mode !== 'dark' ? color : colorForDarkMode, 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 6716593964400..c6e2012740160 100644 --- a/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js +++ b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js @@ -3,7 +3,7 @@ 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'; -import { unstable_useTreeItem2 as useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Content, TreeItem2IconContainer, 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 e810c4bf4ce2d..a2e9d06a57148 100644 --- a/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.tsx @@ -3,10 +3,7 @@ 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'; -import { - unstable_useTreeItem2 as useTreeItem2, - UseTreeItem2Parameters, -} from '@mui/x-tree-view/useTreeItem2'; +import { useTreeItem2, UseTreeItem2Parameters } from '@mui/x-tree-view/useTreeItem2'; import { TreeItem2Content, TreeItem2IconContainer, diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx b/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx index c792574ce2294..1b3676f173b34 100644 --- a/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx +++ b/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx @@ -11,7 +11,7 @@ import composeClasses from '@mui/utils/composeClasses'; import { styled, createUseThemeProps } from '../internals/zero-styled'; import { TreeItem2Props, TreeItem2OwnerState } from './TreeItem2.types'; import { - unstable_useTreeItem2 as useTreeItem2, + useTreeItem2, UseTreeItem2ContentSlotOwnProps, UseTreeItem2LabelSlotOwnProps, UseTreeItem2Status, diff --git a/packages/x-tree-view/src/useTreeItem2/index.ts b/packages/x-tree-view/src/useTreeItem2/index.ts index 1305bca8626e0..94545e26b83b6 100644 --- a/packages/x-tree-view/src/useTreeItem2/index.ts +++ b/packages/x-tree-view/src/useTreeItem2/index.ts @@ -1,4 +1,9 @@ -export { useTreeItem2 as unstable_useTreeItem2 } from './useTreeItem2'; +import { useTreeItem2 as useTreeItem2Export } from './useTreeItem2'; + +export const useTreeItem2 = useTreeItem2Export; +// eslint-disable-next-line @typescript-eslint/naming-convention +export const unstable_useTreeItem2 = useTreeItem2Export; + export type { UseTreeItem2Parameters, UseTreeItem2ReturnValue, diff --git a/scripts/x-tree-view-pro.exports.json b/scripts/x-tree-view-pro.exports.json index 1bc3c9b84ef8f..ea69aaa8f832b 100644 --- a/scripts/x-tree-view-pro.exports.json +++ b/scripts/x-tree-view-pro.exports.json @@ -63,6 +63,7 @@ { "name": "TreeViewSlots", "kind": "Interface" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "unstable_useTreeItem2", "kind": "Variable" }, + { "name": "useTreeItem2", "kind": "Variable" }, { "name": "UseTreeItem2ContentSlotOwnProps", "kind": "Interface" }, { "name": "UseTreeItem2DragAndDropOverlaySlotOwnProps", "kind": "Interface" }, { "name": "UseTreeItem2GroupTransitionSlotOwnProps", "kind": "Interface" }, diff --git a/scripts/x-tree-view.exports.json b/scripts/x-tree-view.exports.json index b6b039d45db32..676aa7f67abea 100644 --- a/scripts/x-tree-view.exports.json +++ b/scripts/x-tree-view.exports.json @@ -67,6 +67,7 @@ { "name": "TreeViewSlots", "kind": "Interface" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "unstable_useTreeItem2", "kind": "Variable" }, + { "name": "useTreeItem2", "kind": "Variable" }, { "name": "UseTreeItem2ContentSlotOwnProps", "kind": "Interface" }, { "name": "UseTreeItem2DragAndDropOverlaySlotOwnProps", "kind": "Interface" }, { "name": "UseTreeItem2GroupTransitionSlotOwnProps", "kind": "Interface" },