diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index 851bd995d35a..389ee9b38218 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -12,7 +12,7 @@ productId: x-tree-view TBD -## Start using the alpha release +## Start using the beta release In `package.json`, change the version of the tree view package to `next`. @@ -41,6 +41,36 @@ The `legacy` bundle that used to support old browsers like IE11 is no longer inc If you need support for IE11, you will need to keep using the latest version of the `v6` release. ::: +### ✅ Rename `nodeId` to `itemId` + +The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency: + +```diff + +- ++ + +``` + +The same change has been applied to the and `ContentComponent` prop: + +```diff + const CustomContent = React.forwardRef((props, ref) => { +- const id = props.nodeId; ++ const id = props.itemId; + + // Render some UI + }); + + function App() { + return ( + + + + ) + } +``` + ### ✅ Use `SimpleTreeView` instead of `TreeView` The `TreeView` component has been deprecated and will be removed in the next major. @@ -56,7 +86,7 @@ You can start replacing it with the new `SimpleTreeView` component which has exa return ( - + - + - + ); @@ -131,7 +161,7 @@ you need to use the new `expandIcon` slot on this component: ```diff } + slots={{ expandIcon: MyCustomExpandIcon }} @@ -179,7 +209,7 @@ you need to use the new `collapseIcon` slot on this component: ```diff } + slots={{ collapseIcon: MyCustomCollapseIcon }} @@ -231,7 +261,7 @@ you need to use the new `endIcon` slot on this component: ```diff } + slots={{ endIcon: MyCustomEndIcon }} @@ -250,7 +280,7 @@ you need to use the new `icon` slot on this component: ```diff } + slots={{ icon: MyCustomIcon }} @@ -273,7 +303,7 @@ you need to use the new `groupTransition` slot on this component: ```diff { -- const { disabled } = useTreeItem(props.nodeId); -+ const { disabled } = useTreeItemState(props.nodeId); +- const { disabled } = useTreeItem(props.itemId); ++ const { disabled } = useTreeItemState(props.itemId); // Render some UI }); diff --git a/docs/data/tree-view/getting-started/FirstComponent.js b/docs/data/tree-view/getting-started/FirstComponent.js index ade354baeab4..f5b1eb6a7691 100644 --- a/docs/data/tree-view/getting-started/FirstComponent.js +++ b/docs/data/tree-view/getting-started/FirstComponent.js @@ -8,13 +8,13 @@ export default function FirstComponent() { aria-label="file system navigator" sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} > - - + + - - - - + + + + diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx b/docs/data/tree-view/getting-started/FirstComponent.tsx index ade354baeab4..f5b1eb6a7691 100644 --- a/docs/data/tree-view/getting-started/FirstComponent.tsx +++ b/docs/data/tree-view/getting-started/FirstComponent.tsx @@ -8,13 +8,13 @@ export default function FirstComponent() { aria-label="file system navigator" sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} > - - + + - - - - + + + + diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx.preview b/docs/data/tree-view/getting-started/FirstComponent.tsx.preview index b31f963565f8..8228e866c065 100644 --- a/docs/data/tree-view/getting-started/FirstComponent.tsx.preview +++ b/docs/data/tree-view/getting-started/FirstComponent.tsx.preview @@ -2,13 +2,13 @@ aria-label="file system navigator" sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} > - - + + - - - - + + + + \ No newline at end of file diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.js b/docs/data/tree-view/overview/BasicSimpleTreeView.js index e45b830807df..5757cfb2964e 100644 --- a/docs/data/tree-view/overview/BasicSimpleTreeView.js +++ b/docs/data/tree-view/overview/BasicSimpleTreeView.js @@ -7,14 +7,14 @@ export default function BasicSimpleTreeView() { return ( - - - - + + + + - - - + + + diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx index e45b830807df..5757cfb2964e 100644 --- a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx +++ b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx @@ -7,14 +7,14 @@ export default function BasicSimpleTreeView() { return ( - - - - + + + + - - - + + + diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview index 4f449dc9b561..3641f9443f57 100644 --- a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview +++ b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview @@ -1,11 +1,11 @@ - - - - + + + + - - - + + + \ No newline at end of file diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md index 7c0145f2a6dd..9429bf8a1d30 100644 --- a/docs/data/tree-view/overview/overview.md +++ b/docs/data/tree-view/overview/overview.md @@ -63,8 +63,8 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem'; export default function App() { return ( - - + + ); } @@ -95,8 +95,8 @@ import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; export default function App() { return ( - - + + ); } diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js index 8215437c8545..d024ef094cc1 100644 --- a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js +++ b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js @@ -40,7 +40,7 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ })); const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { - const { id, nodeId, label, disabled, children, ...other } = props; + const { id, itemId, label, disabled, children, ...other } = props; const { getRootProps, @@ -49,10 +49,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { getLabelProps, getGroupTransitionProps, status, - } = useTreeItem2({ id, nodeId, children, label, disabled, rootRef: ref }); + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); return ( - + diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx index c426440118e5..7651bb7ed31e 100644 --- a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx +++ b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx @@ -50,7 +50,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( props: CustomTreeItemProps, ref: React.Ref, ) { - const { id, nodeId, label, disabled, children, ...other } = props; + const { id, itemId, label, disabled, children, ...other } = props; const { getRootProps, @@ -59,10 +59,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( getLabelProps, getGroupTransitionProps, status, - } = useTreeItem2({ id, nodeId, children, label, disabled, rootRef: ref }); + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); return ( - + diff --git a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js index c6eb49a5783b..4c28c6cd280b 100644 --- a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js +++ b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js @@ -30,7 +30,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) { classes, className, label, - nodeId, + itemId, icon: iconProp, expansionIcon, displayIcon, @@ -44,7 +44,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) { handleExpansion, handleSelection, preventSelection, - } = useTreeItemState(nodeId); + } = useTreeItemState(itemId); const icon = iconProp || expansionIcon || displayIcon; diff --git a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx index fa1b76d6032f..2847daf70967 100644 --- a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx +++ b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx @@ -34,7 +34,7 @@ const CustomContent = React.forwardRef(function CustomContent( classes, className, label, - nodeId, + itemId, icon: iconProp, expansionIcon, displayIcon, @@ -48,7 +48,7 @@ const CustomContent = React.forwardRef(function CustomContent( handleExpansion, handleSelection, preventSelection, - } = useTreeItemState(nodeId); + } = useTreeItemState(itemId); const icon = iconProp || expansionIcon || displayIcon; diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js index 1786ba3d4aa7..0261e5154c82 100644 --- a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js +++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js @@ -28,7 +28,7 @@ const CustomTreeItem = React.forwardRef((props, ref) => ( {...props} slotProps={{ label: { - id: `${props.nodeId}-label`, + id: `${props.itemId}-label`, }, }} /> diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx index 7bac158b75a7..99f29c8d5d29 100644 --- a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx +++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx @@ -30,7 +30,7 @@ const CustomTreeItem = React.forwardRef( {...props} slotProps={{ label: { - id: `${props.nodeId}-label`, + id: `${props.itemId}-label`, }, }} /> diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js index 655627dc0794..2b7de2e27e14 100644 --- a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js +++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js @@ -59,14 +59,14 @@ const TreeItemContext = React.createContext({ onLabelValueChange: () => {} }); const CustomTreeItem = React.forwardRef((props, ref) => { const { interactions } = useTreeItem2Utils({ - nodeId: props.nodeId, + itemId: props.itemId, children: props.children, }); const { onLabelValueChange } = React.useContext(TreeItemContext); const handleLabelValueChange = (newLabel) => { - onLabelValueChange(props.nodeId, newLabel); + onLabelValueChange(props.itemId, newLabel); }; const handleContentClick = (event) => { @@ -123,10 +123,10 @@ export default function LabelSlots() { const context = React.useMemo( () => ({ - onLabelValueChange: (nodeId, label) => + onLabelValueChange: (itemId, label) => setProducts((prev) => { const walkTree = (item) => { - if (item.id === nodeId) { + if (item.id === itemId) { return { ...item, label }; } if (item.children) { diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx index fab56741721b..0dbfa7e69e57 100644 --- a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx +++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx @@ -69,20 +69,20 @@ function CustomLabel(props: CustomLabelProps) { } const TreeItemContext = React.createContext<{ - onLabelValueChange: (nodeId: string, label: string) => void; + onLabelValueChange: (itemId: string, label: string) => void; }>({ onLabelValueChange: () => {} }); const CustomTreeItem = React.forwardRef( (props: TreeItem2Props, ref: React.Ref) => { const { interactions } = useTreeItem2Utils({ - nodeId: props.nodeId, + itemId: props.itemId, children: props.children, }); const { onLabelValueChange } = React.useContext(TreeItemContext); const handleLabelValueChange = (newLabel: string) => { - onLabelValueChange(props.nodeId, newLabel); + onLabelValueChange(props.itemId, newLabel); }; const handleContentClick: UseTreeItem2ContentSlotOwnProps['onClick'] = ( @@ -142,10 +142,10 @@ export default function LabelSlots() { const context = React.useMemo( () => ({ - onLabelValueChange: (nodeId: string, label: string) => + onLabelValueChange: (itemId: string, label: string) => setProducts((prev) => { const walkTree = (item: TreeViewBaseItem): TreeViewBaseItem => { - if (item.id === nodeId) { + if (item.id === itemId) { return { ...item, label }; } if (item.children) { diff --git a/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js index 7105fc20cfb0..fbccfb57e3c2 100644 --- a/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js +++ b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js @@ -59,7 +59,7 @@ function TreeView(inProps) { const renderNode = ({ children: itemChildren, ...itemProps }) => { return ( - + {itemChildren?.map(renderNode)} ); diff --git a/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx index 64197707f8f6..c8decec9b3ca 100644 --- a/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx +++ b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx @@ -111,7 +111,7 @@ function TreeView( ...itemProps }: ReturnType[number]) => { return ( - + {itemChildren?.map(renderNode)} ); diff --git a/docs/data/tree-view/rich-tree-view/headless/headless.md b/docs/data/tree-view/rich-tree-view/headless/headless.md index 98eff9f4b29c..6d920b03d2c5 100644 --- a/docs/data/tree-view/rich-tree-view/headless/headless.md +++ b/docs/data/tree-view/rich-tree-view/headless/headless.md @@ -219,7 +219,7 @@ const useCustomPlugin = ({ params }) => { }; }; -function useTreeItemState(nodeId: string) { +function useTreeItemState(itemId: string) { const { customPlugin, // ...other elements returned by the context @@ -237,7 +237,7 @@ function TreeItemContent() { const { customPlugin, // ...other elements returned by `useTreeItemState` - } = useTreeItemState(props.nodeId); + } = useTreeItemState(props.itemId); // Do something with customPlugin.enabled } diff --git a/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.js b/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.js index 64bdeca0c9c6..10913836a21d 100644 --- a/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.js @@ -47,19 +47,19 @@ export default function BorderedTreeView() { }} sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }} > - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.tsx index f330fd1c9dc2..fd6a9e2a2929 100644 --- a/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.tsx @@ -49,19 +49,19 @@ export default function BorderedTreeView() { }} sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }} > - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js index c18fffa3cf98..8db5e31fc09d 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js +++ b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js @@ -35,19 +35,19 @@ export default function CustomAnimation() { defaultExpandedItems={['1']} sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }} > - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx index 4d9ec87c58ff..786650ea38e0 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx @@ -37,19 +37,19 @@ export default function CustomAnimation() { defaultExpandedItems={['1']} sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }} > - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js index 93805a66ff4d..2076a1e87f93 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js @@ -19,7 +19,7 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ })); const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { - const { id, nodeId, label, disabled, children, ...other } = props; + const { id, itemId, label, disabled, children, ...other } = props; const { getRootProps, @@ -28,10 +28,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { getLabelProps, getGroupTransitionProps, status, - } = useTreeItem2({ id, nodeId, children, label, disabled, rootRef: ref }); + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); return ( - + @@ -65,13 +65,13 @@ export default function CustomContentTreeView() { sx={{ position: 'relative' }} defaultExpandedItems={['3']} > - - + + - - - - + + + + diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx index 4eed51b5755a..a7e41eb533c3 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx @@ -29,7 +29,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( props: CustomTreeItemProps, ref: React.Ref, ) { - const { id, nodeId, label, disabled, children, ...other } = props; + const { id, itemId, label, disabled, children, ...other } = props; const { getRootProps, @@ -38,10 +38,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( getLabelProps, getGroupTransitionProps, status, - } = useTreeItem2({ id, nodeId, children, label, disabled, rootRef: ref }); + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); return ( - + @@ -75,13 +75,13 @@ export default function CustomContentTreeView() { sx={{ position: 'relative' }} defaultExpandedItems={['3']} > - - + + - - - - + + + + diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx.preview b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx.preview index bcceb2d03348..8d935ef57ba7 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx.preview +++ b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx.preview @@ -3,13 +3,13 @@ sx={{ position: 'relative' }} defaultExpandedItems={['3']} > - - + + - - - - + + + + \ No newline at end of file diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js index 93ca0557c4ce..3bfdaf46af80 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js +++ b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js @@ -40,19 +40,19 @@ export default function CustomIcons() { }} sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }} > - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx index 81eb5382c0de..f8746f6dd376 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx @@ -40,19 +40,19 @@ export default function CustomIcons() { }} sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }} > - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js index 47825b6fd8f6..f2426eb5cbf0 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js +++ b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js @@ -35,19 +35,19 @@ export default function CustomStyling() { defaultExpandedItems={['1']} sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }} > - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx index 68512c179f17..1f9aa0a895b6 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx @@ -36,19 +36,19 @@ export default function CustomStyling() { defaultExpandedItems={['1']} sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }} > - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.js b/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.js index 3eb0ebf98490..572f804db372 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.js @@ -148,32 +148,32 @@ export default function CustomizedTreeView() { defaultSelectedItems="3" sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} > - - - - - - + + + + + + - - + + - + - - + + - - + + ); } diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.tsx index 62cf7aeadacf..f28c321d880f 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.tsx @@ -163,32 +163,32 @@ export default function CustomizedTreeView() { defaultSelectedItems="3" sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} > - - - - - - + + + + + + - - + + - + - - + + - - + + ); } 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 540f159f5df1..078d26889f44 100644 --- a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js @@ -63,7 +63,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { const theme = useTheme(); const { id, - nodeId, + itemId, label, disabled, children, @@ -83,7 +83,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { getLabelProps, getGroupTransitionProps, status, - } = useTreeItem({ id, nodeId, children, label, disabled, rootRef: ref }); + } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref }); const style = { '--tree-view-color': theme.palette.mode !== 'dark' ? color : colorForDarkMode, @@ -92,7 +92,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { }; return ( - + - - - + + + - + ); } 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 8116117180ba..59274dac5839 100644 --- a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx @@ -87,7 +87,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( const theme = useTheme(); const { id, - nodeId, + itemId, label, disabled, children, @@ -107,7 +107,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( getLabelProps, getGroupTransitionProps, status, - } = useTreeItem({ id, nodeId, children, label, disabled, rootRef: ref }); + } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref }); const style = { '--tree-view-color': theme.palette.mode !== 'dark' ? color : colorForDarkMode, @@ -116,7 +116,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( }; return ( - + - - - + + + - + ); } diff --git a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js index 0037ee1c64f1..f924050a7f06 100644 --- a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js @@ -7,7 +7,7 @@ import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; const CustomTreeItem = React.forwardRef(function MyTreeItem(props, ref) { const { interactions } = useTreeItem2Utils({ - nodeId: props.nodeId, + itemId: props.itemId, children: props.children, }); @@ -36,13 +36,13 @@ export default function IconExpansionTreeView() { return ( - - + + - - - - + + + + diff --git a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx index 8e55c8a1626c..7fda369d214d 100644 --- a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx @@ -10,7 +10,7 @@ const CustomTreeItem = React.forwardRef(function MyTreeItem( ref: React.Ref, ) { const { interactions } = useTreeItem2Utils({ - nodeId: props.nodeId, + itemId: props.itemId, children: props.children, }); @@ -39,13 +39,13 @@ export default function IconExpansionTreeView() { return ( - - + + - - - - + + + + diff --git a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx.preview b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx.preview index 9c02dd229e67..c72caa3b106d 100644 --- a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx.preview +++ b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx.preview @@ -1,11 +1,11 @@ - - + + - - - - + + + + \ No newline at end of file diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.js b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.js index 7f59af263785..59c40e034d24 100644 --- a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.js +++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.js @@ -8,7 +8,7 @@ const CustomTreeItem = React.forwardRef((props, ref) => ( {...props} slotProps={{ label: { - id: `${props.nodeId}-label`, + id: `${props.itemId}-label`, }, }} /> @@ -21,14 +21,14 @@ export default function LabelSlotProps() { defaultExpandedItems={['pickers']} sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }} > - - - - + + + + - - - + + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx index 9f8a617aad0f..3476b3b8e13c 100644 --- a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx @@ -9,7 +9,7 @@ const CustomTreeItem = React.forwardRef( {...props} slotProps={{ label: { - id: `${props.nodeId}-label`, + id: `${props.itemId}-label`, }, }} /> @@ -23,14 +23,14 @@ export default function LabelSlotProps() { defaultExpandedItems={['pickers']} sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }} > - - - - + + + + - - - + + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx.preview b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx.preview index 8c983099963e..1aaad97525e6 100644 --- a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx.preview +++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx.preview @@ -3,13 +3,13 @@ defaultExpandedItems={['pickers']} sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }} > - - - - + + + + - - - + + + \ No newline at end of file diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlots.js b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.js index 28d3659e4a0b..cec9de6b0aeb 100644 --- a/docs/data/tree-view/simple-tree-view/customization/LabelSlots.js +++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.js @@ -31,31 +31,31 @@ export default function LabelSlots() { return ( - + - + diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlots.tsx b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.tsx index cd688e5a9601..59882c3023c1 100644 --- a/docs/data/tree-view/simple-tree-view/customization/LabelSlots.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.tsx @@ -46,31 +46,31 @@ export default function LabelSlots() { return ( - + - + diff --git a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js index 44cd645380e5..a11d874a4659 100644 --- a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js +++ b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js @@ -43,20 +43,20 @@ export default function ControlledExpansion() { expandedItems={expandedItems} onExpandedItemsChange={handleExpandedItemsChange} > - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx index 6fcc35adf19b..ec0f524d81cf 100644 --- a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx +++ b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx @@ -46,20 +46,20 @@ export default function ControlledExpansion() { expandedItems={expandedItems} onExpandedItemsChange={handleExpandedItemsChange} > - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.js b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.js index b50e0cf04c88..f656970f2ebf 100644 --- a/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.js +++ b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.js @@ -24,20 +24,20 @@ export default function TrackItemExpansionToggle() { - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.tsx b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.tsx index db4da5fe2876..6f257acad9b9 100644 --- a/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.tsx +++ b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.tsx @@ -30,20 +30,20 @@ export default function TrackItemExpansionToggle() { )} - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.js b/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.js index e8b445182d59..9e12cc3ce060 100644 --- a/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.js +++ b/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.js @@ -18,20 +18,20 @@ export default function FocusedSimpleTreeView() { - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.tsx b/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.tsx index 810cae2363a2..bc98ac6e25a9 100644 --- a/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.tsx @@ -18,20 +18,20 @@ export default function FocusedSimpleTreeView() { - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js index e45b830807df..5757cfb2964e 100644 --- a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js +++ b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js @@ -7,14 +7,14 @@ export default function BasicSimpleTreeView() { return ( - - - - + + + + - - - + + + diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx index e45b830807df..5757cfb2964e 100644 --- a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx @@ -7,14 +7,14 @@ export default function BasicSimpleTreeView() { return ( - - - - + + + + - - - + + + diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx.preview b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx.preview index 4f449dc9b561..3641f9443f57 100644 --- a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx.preview +++ b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx.preview @@ -1,11 +1,11 @@ - - - - + + + + - - - + + + \ No newline at end of file diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js index 9277addefe8d..773e68d490d0 100644 --- a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js +++ b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js @@ -27,24 +27,24 @@ export default function DisabledItemsFocusable() { - - - - + + + + - - - + + + - - + + - - - + + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx index f70a8450a3c1..2cab7252b0a9 100644 --- a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx +++ b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx @@ -27,24 +27,24 @@ export default function DisabledItemsFocusable() { - - - - + + + + - - - + + + - - + + - - - + + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js index 19dda696cb4f..14a73027e0ad 100644 --- a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js +++ b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js @@ -7,24 +7,24 @@ export default function DisabledJSXItem() { return ( - - - - + + + + - - - + + + - - + + - - - + + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx index 19dda696cb4f..14a73027e0ad 100644 --- a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx +++ b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx @@ -7,24 +7,24 @@ export default function DisabledJSXItem() { return ( - - - - + + + + - - - + + + - - + + - - - + + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/items/items.md b/docs/data/tree-view/simple-tree-view/items/items.md index a8b34551b20f..9105dc5588cc 100644 --- a/docs/data/tree-view/simple-tree-view/items/items.md +++ b/docs/data/tree-view/simple-tree-view/items/items.md @@ -24,12 +24,12 @@ The Simple Tree View component receives its items directly as JSX children. ### Item identifier -Each Tree Item must have a unique `nodeId`. +Each Tree Item must have a unique `itemId`. This is used internally to identify the item in the various models, and to track it across updates. ```tsx - + ``` diff --git a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js index 1d47a26774c7..12f8708449c3 100644 --- a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js +++ b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js @@ -44,20 +44,20 @@ export default function ControlledSelection() { onSelectedItemsChange={handleSelectedItemsChange} multiSelect > - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx index 1b5d5f01692b..b638e19eecee 100644 --- a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx +++ b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx @@ -44,20 +44,20 @@ export default function ControlledSelection() { onSelectedItemsChange={handleSelectedItemsChange} multiSelect > - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js index c5888258fb7b..9db0d16ef7e6 100644 --- a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js +++ b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js @@ -7,20 +7,20 @@ export default function DisableSelection() { return ( - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx index c5888258fb7b..9db0d16ef7e6 100644 --- a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx +++ b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx @@ -7,20 +7,20 @@ export default function DisableSelection() { return ( - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js index d960923d3502..eba9bb8cd17f 100644 --- a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js +++ b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js @@ -7,20 +7,20 @@ export default function MultiSelectTreeView() { return ( - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx index d960923d3502..eba9bb8cd17f 100644 --- a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx @@ -7,20 +7,20 @@ export default function MultiSelectTreeView() { return ( - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js index ff2d73fb65c9..4bc39db3cf23 100644 --- a/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js +++ b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js @@ -23,20 +23,20 @@ export default function TrackItemSelectionToggle() { - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx index f1fd58c9cdec..ebd584ed1b69 100644 --- a/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx +++ b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx @@ -29,20 +29,20 @@ export default function TrackItemSelectionToggle() { - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/pages/x/api/tree-view/tree-item-2.json b/docs/pages/x/api/tree-view/tree-item-2.json index d75d891d1528..82e77380feb4 100644 --- a/docs/pages/x/api/tree-view/tree-item-2.json +++ b/docs/pages/x/api/tree-view/tree-item-2.json @@ -1,6 +1,6 @@ { "props": { - "nodeId": { "type": { "name": "string" }, "required": true }, + "itemId": { "type": { "name": "string" }, "required": true }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json index 62886e2866d2..e51cc365b7d3 100644 --- a/docs/pages/x/api/tree-view/tree-item.json +++ b/docs/pages/x/api/tree-view/tree-item.json @@ -1,6 +1,6 @@ { "props": { - "nodeId": { "type": { "name": "string" }, "required": true }, + "itemId": { "type": { "name": "string" }, "required": true }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "ContentComponent": { diff --git a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json index 5fb4062e31c8..2278abc442be 100644 --- a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json +++ b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json @@ -3,10 +3,10 @@ "propDescriptions": { "children": { "description": "The content of the component." }, "classes": { "description": "Override or extend the styles applied to the component." }, - "disabled": { "description": "If true, the node is disabled." }, - "id": { "description": "The id attribute of the node. If not provided, it will be generated." }, - "label": { "description": "The label of the node." }, - "nodeId": { "description": "The id of the node. Must be unique." }, + "disabled": { "description": "If true, the item is disabled." }, + "id": { "description": "The id attribute of the item. If not provided, it will be generated." }, + "itemId": { "description": "The id of the item. Must be unique." }, + "label": { "description": "The label of the item." }, "onFocus": { "description": "This prop isn't supported. Use the onItemFocus callback on the tree if you need to monitor a item's focus." }, diff --git a/docs/translations/api-docs/tree-view/tree-item/tree-item.json b/docs/translations/api-docs/tree-view/tree-item/tree-item.json index 4144332744dc..24a2ba62082e 100644 --- a/docs/translations/api-docs/tree-view/tree-item/tree-item.json +++ b/docs/translations/api-docs/tree-view/tree-item/tree-item.json @@ -9,8 +9,8 @@ }, "ContentProps": { "description": "Props applied to ContentComponent." }, "disabled": { "description": "If true, the item is disabled." }, + "itemId": { "description": "The id of the item." }, "label": { "description": "The tree item label." }, - "nodeId": { "description": "The id of the node." }, "onFocus": { "description": "This prop isn't supported. Use the onItemFocus callback on the tree if you need to monitor a item's focus." }, diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index f89dbad4e1f6..5894102fcca6 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -223,6 +223,7 @@ The list includes these transformers - [`rename-selection-props`](#rename-selection-props) - [`replace-transition-props-by-slot`](#replace-transition-props-by-slot) - [`rename-focus-callback`](#rename-focus-callback) +- [`rename-nodeid`](#rename-nodeid) #### `rename-tree-view-simple-tree-view` @@ -238,7 +239,7 @@ Renames the `TreeView` component to `SimpleTreeView` return ( - + - + - + ); @@ -253,8 +254,8 @@ Renames the `useTreeItem` hook to `useTreeItemState` +import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem'; const CustomContent = React.forwardRef((props, ref) => { -- const { disabled } = useTreeItem(props.nodeId); -+ const { disabled } = useTreeItemState(props.nodeId); +- const { disabled } = useTreeItem(props.itemId); ++ const { disabled } = useTreeItemState(props.itemId); // Render some UI }); @@ -327,6 +328,16 @@ Replace the `onNodeFocus` callback with `onItemFocus`: /> ``` +#### `rename-nodeid` + +Rename nodeId to itemId + +```diff + + +; diff --git a/packages/x-codemod/src/v7.0.0/tree-view/rename-nodeid/expected.spec.js b/packages/x-codemod/src/v7.0.0/tree-view/rename-nodeid/expected.spec.js new file mode 100644 index 000000000000..63624c90517b --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/tree-view/rename-nodeid/expected.spec.js @@ -0,0 +1,3 @@ + + +; diff --git a/packages/x-codemod/src/v7.0.0/tree-view/rename-nodeid/index.ts b/packages/x-codemod/src/v7.0.0/tree-view/rename-nodeid/index.ts new file mode 100644 index 000000000000..066e0f0e2bcf --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/tree-view/rename-nodeid/index.ts @@ -0,0 +1,18 @@ +import renameProps from '../../../util/renameProps'; +import type { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; + +export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { + const j = api.jscodeshift; + const root = j(file.source); + + const printOptions = options.printOptions; + + return renameProps({ + root, + componentNames: ['TreeView', 'SimpleTreeView'], + props: { + nodeId: 'itemId', + }, + j, + }).toSource(printOptions); +} diff --git a/packages/x-codemod/src/v7.0.0/tree-view/rename-nodeid/rename-nodeid.test.ts b/packages/x-codemod/src/v7.0.0/tree-view/rename-nodeid/rename-nodeid.test.ts new file mode 100644 index 000000000000..b7a26874e3bd --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/tree-view/rename-nodeid/rename-nodeid.test.ts @@ -0,0 +1,27 @@ +import path from 'path'; +import { expect } from 'chai'; +import jscodeshift from 'jscodeshift'; +import transform from '.'; +import readFile from '../../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('v7.0.0/tree-view', () => { + describe('rename-nodeid', () => { + it('transforms props as needed', () => { + const actual = transform({ source: read('./actual.spec.js') }, { jscodeshift }, {}); + + const expected = read('./expected.spec.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./expected.spec.js') }, { jscodeshift }, {}); + + const expected = read('./expected.spec.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); +}); diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx index b1131dec923b..27f3df1b64cf 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx @@ -44,16 +44,16 @@ function WrappedTreeItem({ slotProps, label, id, - nodeId, + itemId, children, }: Pick, 'slots' | 'slotProps'> & - Pick & { label: string }) { + Pick & { label: string }) { const Item = slots?.item ?? TreeItem; const itemProps = useSlotProps({ elementType: Item, externalSlotProps: slotProps?.item, - additionalProps: { nodeId, id, label }, - ownerState: { nodeId, label }, + additionalProps: { itemId, id, label }, + ownerState: { itemId, label }, }); return {children}; @@ -116,7 +116,7 @@ const RichTreeView = React.forwardRef(function RichTreeView< const renderNode = ({ label, - nodeId, + itemId, id, children, }: ReturnType[number]) => { @@ -124,10 +124,10 @@ const RichTreeView = React.forwardRef(function RichTreeView< {children?.map(renderNode)} diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.types.ts b/packages/x-tree-view/src/RichTreeView/RichTreeView.types.ts index 5403d392a7fe..2687be9a9d65 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.types.ts +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.types.ts @@ -15,7 +15,7 @@ import { TreeViewItemId } from '../models'; import { TreeViewPublicAPI } from '../internals/models'; interface RichTreeViewItemSlotOwnerState { - nodeId: TreeViewItemId; + itemId: TreeViewItemId; label: string; } diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.test.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.test.tsx index d60e248a558b..69e2f4b8bcca 100644 --- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.test.tsx +++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.test.tsx @@ -25,7 +25,7 @@ describe('', () => { it('should warn when switching from controlled to uncontrolled of the expandedItems prop', () => { const { setProps } = render( - + , ); @@ -39,7 +39,7 @@ describe('', () => { it('should warn when switching from controlled to uncontrolled of the selectedItems prop', () => { const { setProps } = render( - + , ); @@ -53,8 +53,8 @@ describe('', () => { it('should not crash when shift clicking a clean tree', () => { render( - - + + , ); @@ -64,12 +64,12 @@ describe('', () => { it('should not crash when selecting multiple items in a deeply nested tree', () => { render( - - - + + + - + , ); fireEvent.click(screen.getByText('Item 1.1.1')); @@ -92,7 +92,7 @@ describe('', () => { it('should not crash when unmounting with duplicate ids', () => { // eslint-disable-next-line @typescript-eslint/no-unused-vars function CustomTreeItem(props: any) { - return ; + return ; } function App() { const [isVisible, hideTreeView] = React.useReducer(() => false, true); @@ -104,8 +104,8 @@ describe('', () => { {isVisible && ( - - + + )} @@ -132,7 +132,7 @@ describe('', () => { const { getByRole } = render( - + , ); act(() => { @@ -146,12 +146,12 @@ describe('', () => { expect(handleKeyDown.callCount).to.equal(3); }); - it('should select node when Enter key is pressed ', () => { + it('should select item when Enter key is pressed ', () => { const handleKeyDown = spy(); const { getByRole, getByTestId } = render( - + , ); act(() => { @@ -169,7 +169,7 @@ describe('', () => { const handleFocus = spy(); const { getByRole } = render( - + , ); @@ -184,7 +184,7 @@ describe('', () => { const handleBlur = spy(); const { getByRole } = render( - + , ); @@ -206,8 +206,8 @@ describe('', () => { }; return ( - - + + ); @@ -241,8 +241,8 @@ describe('', () => { }; return ( - - + + ); } @@ -275,8 +275,8 @@ describe('', () => { onSelectedItemsChange={onSelectedItemsChange} multiSelect > - - + + ); } @@ -308,8 +308,8 @@ describe('', () => { }} id="tree" > - - + + ); @@ -347,7 +347,7 @@ describe('', () => { - {!hide && } + {!hide && } ); } @@ -363,10 +363,10 @@ describe('', () => { const { getByRole, getByTestId } = render( - - - - + + + + , ); @@ -392,7 +392,7 @@ describe('', () => { const focusSpy = spy(); const { getByRole } = render( - + , ); @@ -412,8 +412,8 @@ describe('', () => { const { getByText } = render( - - + + , ); @@ -429,8 +429,8 @@ describe('', () => { const { getByTestId } = render( -
}} nodeId="1" label="outer"> - +
}} itemId="1" label="outer"> + , ); @@ -448,8 +448,8 @@ describe('', () => { const { getByRole } = render( - - + + , ); @@ -465,8 +465,8 @@ describe('', () => { const { getByRole } = render( - - + + , ); @@ -482,10 +482,10 @@ describe('', () => { const { getByRole } = render( - - + + - + , ); @@ -501,10 +501,10 @@ describe('', () => { const { getByRole } = render( - - + + - + , ); @@ -520,10 +520,10 @@ describe('', () => { const { getByRole } = render( - - + + - + , ); @@ -534,7 +534,7 @@ describe('', () => { expect(onItemFocus.lastCall.lastArg).to.equal('1'); }); - it('should focus specific node using `apiRef`', () => { + it('should focus specific item using `apiRef`', () => { let apiRef: SimpleTreeViewApiRef; const onItemFocus = spy(); @@ -542,10 +542,10 @@ describe('', () => { apiRef = useTreeViewApiRef(); return ( - - + + - + ); } @@ -560,7 +560,7 @@ describe('', () => { expect(onItemFocus.lastCall.lastArg).to.equal('2'); }); - it('should not focus node if parent is collapsed', () => { + it('should not focus item if parent is collapsed', () => { let apiRef: SimpleTreeViewApiRef; const onItemFocus = spy(); @@ -568,10 +568,10 @@ describe('', () => { apiRef = useTreeViewApiRef(); return ( - - + + - + ); } diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx index 4e0a49f2eda2..87728e407c48 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx @@ -16,7 +16,7 @@ const TEST_TREE_VIEW_CONTEXT_VALUE: TreeViewContextValue isNodeExpanded: () => false, isNodeFocused: () => false, isNodeSelected: () => false, - isNodeDisabled: (nodeId: string | null): nodeId is string => !!nodeId, + isNodeDisabled: (itemId: string | null): itemId is string => !!itemId, getTreeItemId: () => '', mapFirstCharFromJSX: () => () => {}, } as any, @@ -39,7 +39,7 @@ const TEST_TREE_VIEW_CONTEXT_VALUE: TreeViewContextValue describe('', () => { const { render } = createRenderer(); - describeConformance(, () => ({ + describeConformance(, () => ({ classes, inheritComponent: 'li', wrapMount: (mount) => (node: React.ReactNode) => { @@ -71,7 +71,7 @@ describe('', () => { expect(() => { PropTypes.checkPropTypes( TreeItem.propTypes, - { nodeId: 'one', onFocus: () => {} }, + { itemId: 'one', onFocus: () => {} }, 'prop', 'TreeItem', ); @@ -82,7 +82,7 @@ describe('', () => { expect(() => { PropTypes.checkPropTypes( TreeItem.propTypes, - { nodeId: 'one', ContentComponent: () => {} }, + { itemId: 'one', ContentComponent: () => {} }, 'prop', 'TreeItem', ); @@ -95,7 +95,7 @@ describe('', () => { const { getByText } = render( - + , ); @@ -114,23 +114,23 @@ describe('', () => { }} defaultExpandedItems={['1']} > - - + +
}} />
}} /> - - + + , ); @@ -154,8 +154,8 @@ describe('', () => { Hide - - {!hide && } + + {!hide && } @@ -173,8 +173,8 @@ describe('', () => { it('should treat an empty array equally to no children', () => { const { getByTestId } = render( - - + + {[]} @@ -187,8 +187,8 @@ describe('', () => { it('should treat multiple empty conditional arrays as empty', () => { const { getByTestId } = render( - - + + {[].map((_, index) => ( a child ))} @@ -206,8 +206,8 @@ describe('', () => { it('should treat one conditional empty and one conditional with results as expandable', () => { const { getByTestId } = render( - - + + {[]} {[1].map((_, index) => ( a child @@ -223,8 +223,8 @@ describe('', () => { it('should handle edge case of nested array of array', () => { const { getByTestId } = render( - - + + {[[]]} @@ -239,8 +239,8 @@ describe('', () => { const { getByText } = render( - - + + , ); @@ -253,7 +253,7 @@ describe('', () => { it('should be able to use a custom id', () => { const { getByRole } = render( - + , ); @@ -268,7 +268,7 @@ describe('', () => { it('should have the role `treeitem`', () => { const { getByTestId } = render( - + , ); @@ -278,8 +278,8 @@ describe('', () => { it('should add the role `group` to a component containing children', () => { const { getByRole, getByText } = render( - - + + , ); @@ -291,8 +291,8 @@ describe('', () => { it('should have the attribute `aria-expanded=false` if collapsed', () => { const { getByTestId } = render( - - + + , ); @@ -303,8 +303,8 @@ describe('', () => { it('should have the attribute `aria-expanded={true}` if expanded', () => { const { getByTestId } = render( - - + + , ); @@ -315,7 +315,7 @@ describe('', () => { it('should not have the attribute `aria-expanded` if no children are present', () => { const { getByTestId } = render( - + , ); @@ -327,7 +327,7 @@ describe('', () => { it('should not have the attribute `aria-disabled` if disabled is false', () => { const { getByTestId } = render( - + , ); @@ -337,7 +337,7 @@ describe('', () => { it('should have the attribute `aria-disabled={true}` if disabled', () => { const { getByTestId } = render( - + , ); @@ -350,7 +350,7 @@ describe('', () => { it('should not have the attribute `aria-selected` if not selected', () => { const { getByTestId } = render( - + , ); @@ -360,7 +360,7 @@ describe('', () => { it('should have the attribute `aria-selected={true}` if selected', () => { const { getByTestId } = render( - + , ); @@ -372,7 +372,7 @@ describe('', () => { it('should have the attribute `aria-selected=false` if not selected', () => { const { getByTestId } = render( - + , ); @@ -382,7 +382,7 @@ describe('', () => { it('should have the attribute `aria-selected={true}` if selected', () => { const { getByTestId } = render( - + , ); @@ -392,7 +392,7 @@ describe('', () => { it('should have the attribute `aria-selected` if disableSelection is true', () => { const { getByTestId } = render( - + , ); @@ -405,9 +405,9 @@ describe('', () => { it('should focus the first node if none of the nodes are selected before the tree receives focus', () => { const { getByRole, getByTestId, queryAllByRole } = render( - - - + + + , ); @@ -423,9 +423,9 @@ describe('', () => { it('should focus the selected node if a node is selected before the tree receives focus', () => { const { getByTestId, getByRole } = render( - - - + + + , ); @@ -441,8 +441,8 @@ describe('', () => { it('should work with programmatic focus', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -473,9 +473,9 @@ describe('', () => { const { getByRole, getByTestId, getByText } = render( - - - + + + , ); @@ -503,8 +503,8 @@ describe('', () => { it('should focus on tree with scroll prevented', () => { const { getByRole, getByTestId } = render( - - + + , ); const focus = spy(getByRole('tree'), 'focus'); @@ -522,8 +522,8 @@ describe('', () => { it('should open the node and not move the focus if focus is on a closed node', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -542,8 +542,8 @@ describe('', () => { it('should move focus to the first child if focus is on an open item', () => { const { getByTestId, getByRole } = render( - - + + , ); @@ -561,8 +561,8 @@ describe('', () => { it('should do nothing if focus is on an end item', () => { const { getByRole, getByTestId, getByText } = render( - - + + , ); @@ -583,8 +583,8 @@ describe('', () => { it('should close the node if focus is on an open node', () => { render( - - + + , ); @@ -607,8 +607,8 @@ describe('', () => { it("should move focus to the item's parent item if focus is on a child that is an end node", () => { render( - - + + , ); @@ -632,9 +632,9 @@ describe('', () => { it("should move focus to the node's parent node if focus is on a child node that is closed", () => { render( - - - + + + , @@ -659,8 +659,8 @@ describe('', () => { it('should do nothing if focus is on a root node that is closed', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -677,7 +677,7 @@ describe('', () => { it('should do nothing if focus is on a root node that is an end node', () => { const { getByRole, getByTestId } = render( - + , ); @@ -694,8 +694,8 @@ describe('', () => { it('moves focus to a sibling node', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -710,8 +710,8 @@ describe('', () => { it('moves focus to a child item', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -741,11 +741,11 @@ describe('', () => { {!hide && ( - - + + )} - + ); @@ -770,10 +770,10 @@ describe('', () => { it("moves focus to a parent's sibling", () => { const { getByRole, getByTestId, getByText } = render( - - + + - + , ); @@ -796,8 +796,8 @@ describe('', () => { it('moves focus to a sibling node', () => { const { getByRole, getByTestId, getByText } = render( - - + + , ); @@ -816,8 +816,8 @@ describe('', () => { it('moves focus to a parent', () => { const { getByRole, getByTestId, getByText } = render( - - + + , ); @@ -839,10 +839,10 @@ describe('', () => { it("moves focus to a sibling's child", () => { const { getByRole, getByTestId, getByText } = render( - - + + - + , ); @@ -865,10 +865,10 @@ describe('', () => { it('moves focus to the first node in the tree', () => { const { getByRole, getByTestId, getByText } = render( - - - - + + + + , ); @@ -889,10 +889,10 @@ describe('', () => { it('moves focus to the last node in the tree without expanded items', () => { const { getByRole, getByTestId } = render( - - - - + + + + , ); @@ -910,12 +910,12 @@ describe('', () => { it('moves focus to the last item in the tree with expanded items', () => { const { getByRole, getByTestId } = render( - - - - - - + + + + + + , @@ -937,10 +937,10 @@ describe('', () => { it('moves focus to the next node with a name that starts with the typed character', () => { const { getByRole, getByTestId } = render( - - two} data-testid="two" /> - - + + two} data-testid="two" /> + + , ); @@ -966,10 +966,10 @@ describe('', () => { it('moves focus to the next node with the same starting character', () => { const { getByRole, getByTestId } = render( - - - - + + + + , ); @@ -995,10 +995,10 @@ describe('', () => { it('should not move focus when pressing a modifier key + letter', () => { const { getByRole, getByTestId } = render( - - - - + + + + , ); @@ -1030,9 +1030,9 @@ describe('', () => { Hide - {!hide && } - - + {!hide && } + + ); @@ -1062,18 +1062,18 @@ describe('', () => { const { getByRole, getByTestId } = render( - - + + - - + + - - - + + + - + , ); @@ -1103,8 +1103,8 @@ describe('', () => { it('expands a node with children', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -1123,8 +1123,8 @@ describe('', () => { it('collapses a node with children', () => { const { getByRole, getByTestId, getByText } = render( - - + + , ); @@ -1148,7 +1148,7 @@ describe('', () => { it('should select a node when space is pressed', () => { const { getByRole, getByTestId } = render( - + , ); @@ -1166,7 +1166,7 @@ describe('', () => { it('should not deselect a node when space is pressed on a selected node', () => { const { getByRole, getByTestId } = render( - + , ); @@ -1185,7 +1185,7 @@ describe('', () => { it('should not select a node when space is pressed and disableSelection', () => { const { getByRole, getByTestId } = render( - + , ); @@ -1200,7 +1200,7 @@ describe('', () => { it('should select a node when Enter is pressed and the node is not selected', () => { const { getByRole, getByTestId } = render( - + , ); @@ -1215,7 +1215,7 @@ describe('', () => { it('should not un-select a node when Enter is pressed and the node is selected', () => { const { getByRole, getByTestId } = render( - + , ); @@ -1232,7 +1232,7 @@ describe('', () => { it('should select a node when click', () => { const { getByText, getByTestId } = render( - + , ); @@ -1244,7 +1244,7 @@ describe('', () => { it('should not deselect a node when clicking a selected node', () => { const { getByText, getByTestId } = render( - + , ); @@ -1256,7 +1256,7 @@ describe('', () => { it('should not select a node when click and disableSelection', () => { const { getByText, getByTestId } = render( - + , ); @@ -1272,8 +1272,8 @@ describe('', () => { specify('clicking a selected node holding ctrl should deselect the node', () => { const { getByText, getByTestId } = render( - - + + , ); @@ -1287,8 +1287,8 @@ describe('', () => { specify('clicking a selected node holding meta should deselect the node', () => { const { getByText, getByTestId } = render( - - + + , ); @@ -1304,8 +1304,8 @@ describe('', () => { it('clicking a selected node shout not deselect the node', () => { const { getByText, getByTestId } = render( - - + + , ); @@ -1320,7 +1320,7 @@ describe('', () => { it('should deselect the item when pressing space on a selected item', () => { const { getByTestId, getByRole } = render( - + , ); @@ -1339,11 +1339,11 @@ describe('', () => { specify('keyboard arrow', () => { const { getByRole, getByTestId, getByText, queryAllByRole } = render( - - - - - + + + + + , ); @@ -1392,11 +1392,11 @@ describe('', () => { specify('keyboard arrow does not select when selectionDisabled', () => { const { getByRole, getByTestId, queryAllByRole } = render( - - - - - + + + + + , ); @@ -1417,12 +1417,12 @@ describe('', () => { specify('keyboard arrow merge', () => { const { getByRole, getByTestId, getByText, queryAllByRole } = render( - - - - - - + + + + + + , ); @@ -1451,17 +1451,17 @@ describe('', () => { specify('keyboard space', () => { const { getByRole, getByTestId, getByText } = render( - - - - + + + + - - - + + + - - + + , ); const tree = getByRole('tree'); @@ -1498,17 +1498,17 @@ describe('', () => { specify('keyboard home and end', () => { const { getByRole, getByTestId } = render( - - - - + + + + - - - + + + - - + + , ); @@ -1548,17 +1548,17 @@ describe('', () => { specify('keyboard home and end do not select when selectionDisabled', () => { const { getByRole, getByText, queryAllByRole } = render( - - - - + + + + - - - + + + - - + + , ); @@ -1588,17 +1588,17 @@ describe('', () => { specify('mouse', () => { const { getByTestId, getByText } = render( - - - - + + + + - - - + + + - - + + , ); @@ -1620,11 +1620,11 @@ describe('', () => { it('mouse behavior after deselection', () => { const { getByTestId, getByText } = render( - - - - - + + + + + , ); @@ -1653,17 +1653,17 @@ describe('', () => { specify('mouse does not range select when selectionDisabled', () => { const { getByText, queryAllByRole } = render( - - - - + + + + - - - + + + - - + + , ); @@ -1677,8 +1677,8 @@ describe('', () => { specify('keyboard', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -1704,8 +1704,8 @@ describe('', () => { specify('keyboard holding ctrl', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -1731,8 +1731,8 @@ describe('', () => { specify('mouse', () => { const { getByText, getByTestId } = render( - - + + , ); @@ -1753,8 +1753,8 @@ describe('', () => { specify('mouse using ctrl', () => { const { getByTestId, getByText } = render( - - + + , ); @@ -1771,8 +1771,8 @@ describe('', () => { specify('mouse using meta', () => { const { getByTestId, getByText } = render( - - + + , ); @@ -1790,11 +1790,11 @@ describe('', () => { specify('ctrl + a selects all', () => { const { getByRole, queryAllByRole } = render( - - - - - + + + + + , ); @@ -1809,11 +1809,11 @@ describe('', () => { specify('ctrl + a does not select all when disableSelection', () => { const { getByRole, queryAllByRole } = render( - - - - - + + + + + , ); @@ -1833,7 +1833,7 @@ describe('', () => { it('should prevent selection by mouse', () => { const { getByText, getByTestId } = render( - + , ); @@ -1844,10 +1844,10 @@ describe('', () => { it('should prevent node triggering start of range selection', () => { const { getByText, getByTestId } = render( - - - - + + + + , ); @@ -1862,10 +1862,10 @@ describe('', () => { it('should prevent node being selected as part of range selection', () => { const { getByText, getByTestId } = render( - - - - + + + + , ); @@ -1880,10 +1880,10 @@ describe('', () => { it('should prevent node triggering end of range selection', () => { const { getByText, getByTestId } = render( - - - - + + + + , ); @@ -1901,7 +1901,7 @@ describe('', () => { it('should prevent selection by keyboard', () => { const { getByRole, getByTestId } = render( - + , ); @@ -1916,10 +1916,10 @@ describe('', () => { it('should not prevent next node being range selected by keyboard', () => { const { getByRole, getByTestId } = render( - - - - + + + + , ); @@ -1936,8 +1936,8 @@ describe('', () => { it('should prevent range selection by keyboard + arrow down', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -1956,9 +1956,9 @@ describe('', () => { it('should select the next non disabled node by keyboard + arrow down', () => { const { getByRole, getByTestId } = render( - - - + + + , ); @@ -1979,11 +1979,11 @@ describe('', () => { it('should prevent range selection by keyboard + space', () => { const { getByRole, getByTestId, getByText } = render( - - - - - + + + + + , ); const tree = getByRole('tree'); @@ -2007,11 +2007,11 @@ describe('', () => { it('should prevent selection by ctrl + a', () => { const { getByRole, queryAllByRole } = render( - - - - - + + + + + , ); @@ -2026,11 +2026,11 @@ describe('', () => { it('should prevent selection by keyboard end', () => { const { getByRole, getByTestId } = render( - - - - - + + + + + , ); @@ -2054,11 +2054,11 @@ describe('', () => { it('should prevent selection by keyboard home', () => { const { getByRole, getByTestId } = render( - - - - - + + + + + , ); @@ -2087,8 +2087,8 @@ describe('', () => { const focusSpy = spy(); const { getByText } = render( - - + + , ); @@ -2099,8 +2099,8 @@ describe('', () => { it('should not prevent programmatic focus', () => { const { getByTestId } = render( - - + + , ); @@ -2113,8 +2113,8 @@ describe('', () => { it('should not prevent focus by type-ahead', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -2129,8 +2129,8 @@ describe('', () => { it('should not prevent focus by arrow keys', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -2147,8 +2147,8 @@ describe('', () => { it('should be focused on tree focus', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -2165,8 +2165,8 @@ describe('', () => { const focusSpy = spy(); const { getByText } = render( - - + + , ); @@ -2177,8 +2177,8 @@ describe('', () => { it('should prevent programmatic focus', () => { const { getByTestId } = render( - - + + , ); @@ -2191,8 +2191,8 @@ describe('', () => { it('should prevent focus by type-ahead', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -2207,9 +2207,9 @@ describe('', () => { it('should be skipped on navigation with arrow keys', () => { const { getByRole, getByTestId } = render( - - - + + + , ); @@ -2226,8 +2226,8 @@ describe('', () => { it('should not be focused on tree focus', () => { const { getByRole, getByTestId } = render( - - + + , ); @@ -2245,9 +2245,9 @@ describe('', () => { it('should prevent expansion on enter', () => { const { getByRole, getByTestId } = render( - - - + + + , ); @@ -2264,9 +2264,9 @@ describe('', () => { it('should prevent expansion on right arrow', () => { const { getByRole, getByTestId } = render( - - - + + + , ); @@ -2283,9 +2283,9 @@ describe('', () => { it('should prevent collapse on left arrow', () => { const { getByRole, getByTestId } = render( - - - + + + , ); @@ -2303,8 +2303,8 @@ describe('', () => { it('should prevent expansion on click', () => { const { getByText, getByTestId } = render( - - + + , ); @@ -2320,7 +2320,7 @@ describe('', () => { const { getByText } = render( - + , ); @@ -2333,9 +2333,9 @@ describe('', () => { it('should disable child items when parent item is disabled', () => { const { getByTestId } = render( - - - + + + , ); @@ -2353,7 +2353,7 @@ describe('', () => { )); const { container } = render( - + , ); expect(container.textContent).to.equal('MOCK CONTENT COMPONENT'); @@ -2366,7 +2366,7 @@ describe('', () => { const { container } = render( @@ -2379,9 +2379,9 @@ describe('', () => { it('should be able to type in an child input', () => { const { getByRole } = render( - + @@ -2419,8 +2419,8 @@ describe('', () => { - - + + , ); diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index 7501355e5137..46defc7f74c0 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx @@ -171,7 +171,7 @@ export const TreeItem = React.forwardRef(function TreeItem( slotProps: inSlotProps, ContentComponent = TreeItemContent, ContentProps, - nodeId, + itemId, id, label, onClick, @@ -198,10 +198,10 @@ export const TreeItem = React.forwardRef(function TreeItem( return Boolean(reactChildren); }; const expandable = isExpandable(children); - const expanded = instance.isNodeExpanded(nodeId); - const focused = instance.isNodeFocused(nodeId); - const selected = instance.isNodeSelected(nodeId); - const disabled = instance.isNodeDisabled(nodeId); + const expanded = instance.isNodeExpanded(itemId); + const focused = instance.isNodeFocused(itemId); + const selected = instance.isNodeSelected(itemId); + const disabled = instance.isNodeDisabled(itemId); const ownerState: TreeItemOwnerState = { ...props, @@ -280,7 +280,7 @@ export const TreeItem = React.forwardRef(function TreeItem( /* single-selection trees unset aria-selected on un-selected items. * * If the tree does not support multiple selection, aria-selected - * is set to true for the selected node and it is not present on any other node in the tree. + * is set to true for the selected item and it is not present on any other item in the tree. * Source: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ */ ariaSelected = true; @@ -294,14 +294,14 @@ export const TreeItem = React.forwardRef(function TreeItem( const canBeFocused = !disabled || disabledItemsFocusable; if (!focused && canBeFocused && event.currentTarget === event.target) { - instance.focusItem(event, nodeId); + instance.focusItem(event, itemId); } } - const idAttribute = instance.getTreeItemId(nodeId, id); + const idAttribute = instance.getTreeItemId(itemId, id); return ( - + , */ label?: React.ReactNode; /** - * The id of the node. + * The id of the item. */ - nodeId: TreeViewItemId; + itemId: TreeViewItemId; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx b/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx index 82619aa0a868..467418e30e72 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx @@ -19,29 +19,29 @@ export interface TreeItemContentProps extends React.HTMLAttributes focused: string; /** State class applied to the element when disabled. */ disabled: string; - /** Styles applied to the tree node icon and collapse/expand icon. */ + /** Styles applied to the tree item icon and collapse/expand icon. */ iconContainer: string; /** Styles applied to the label element. */ label: string; }; /** - * The tree node label. + * The tree item label. */ label?: React.ReactNode; /** - * The id of the node. + * The id of the item. */ - nodeId: string; + itemId: string; /** - * The icon to display next to the tree node's label. + * The icon to display next to the tree item's label. */ icon?: React.ReactNode; /** - * The icon to display next to the tree node's label. Either an expansion or collapse icon. + * The icon to display next to the tree item's label. Either an expansion or collapse icon. */ expansionIcon?: React.ReactNode; /** - * The icon to display next to the tree node's label. Either a parent or end icon. + * The icon to display next to the tree item's label. Either a parent or end icon. */ displayIcon?: React.ReactNode; } @@ -62,7 +62,7 @@ const TreeItemContent = React.forwardRef(function TreeItemContent( expansionIcon, icon: iconProp, label, - nodeId, + itemId, onClick, onMouseDown, ...other @@ -76,7 +76,7 @@ const TreeItemContent = React.forwardRef(function TreeItemContent( handleExpansion, handleSelection, preventSelection, - } = useTreeItemState(nodeId); + } = useTreeItemState(itemId); const icon = iconProp || expansionIcon || displayIcon; @@ -128,25 +128,25 @@ TreeItemContent.propTypes = { classes: PropTypes.object.isRequired, className: PropTypes.string, /** - * The icon to display next to the tree node's label. Either a parent or end icon. + * The icon to display next to the tree item's label. Either a parent or end icon. */ displayIcon: PropTypes.node, /** - * The icon to display next to the tree node's label. Either an expansion or collapse icon. + * The icon to display next to the tree item's label. Either an expansion or collapse icon. */ expansionIcon: PropTypes.node, /** - * The icon to display next to the tree node's label. + * The icon to display next to the tree item's label. */ icon: PropTypes.node, /** - * The tree node label. + * The id of the item. */ - label: PropTypes.node, + itemId: PropTypes.string.isRequired, /** - * The id of the node. + * The tree item label. */ - nodeId: PropTypes.string.isRequired, + label: PropTypes.node, } as any; export { TreeItemContent }; diff --git a/packages/x-tree-view/src/TreeItem/useTreeItemState.ts b/packages/x-tree-view/src/TreeItem/useTreeItemState.ts index ea80469e22b3..41085c010988 100644 --- a/packages/x-tree-view/src/TreeItem/useTreeItemState.ts +++ b/packages/x-tree-view/src/TreeItem/useTreeItemState.ts @@ -2,29 +2,29 @@ import * as React from 'react'; import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext'; import { DefaultTreeViewPlugins } from '../internals/plugins'; -export function useTreeItemState(nodeId: string) { +export function useTreeItemState(itemId: string) { const { instance, selection: { multiSelect }, } = useTreeViewContext(); - const expandable = instance.isNodeExpandable(nodeId); - const expanded = instance.isNodeExpanded(nodeId); - const focused = instance.isNodeFocused(nodeId); - const selected = instance.isNodeSelected(nodeId); - const disabled = instance.isNodeDisabled(nodeId); + const expandable = instance.isNodeExpandable(itemId); + const expanded = instance.isNodeExpanded(itemId); + const focused = instance.isNodeFocused(itemId); + const selected = instance.isNodeSelected(itemId); + const disabled = instance.isNodeDisabled(itemId); const handleExpansion = (event: React.MouseEvent) => { if (!disabled) { if (!focused) { - instance.focusItem(event, nodeId); + instance.focusItem(event, itemId); } const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey); // If already expanded and trying to toggle selection don't close - if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) { - instance.toggleNodeExpansion(event, nodeId); + if (expandable && !(multiple && instance.isNodeExpanded(itemId))) { + instance.toggleNodeExpansion(event, itemId); } } }; @@ -32,19 +32,19 @@ export function useTreeItemState(nodeId: string) { const handleSelection = (event: React.MouseEvent) => { if (!disabled) { if (!focused) { - instance.focusItem(event, nodeId); + instance.focusItem(event, itemId); } const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey); if (multiple) { if (event.shiftKey) { - instance.selectRange(event, { end: nodeId }); + instance.selectRange(event, { end: itemId }); } else { - instance.selectNode(event, nodeId, true); + instance.selectNode(event, itemId, true); } } else { - instance.selectNode(event, nodeId); + instance.selectNode(event, itemId); } } }; diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx b/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx index 45cddfc5efd6..c0959fe8c69c 100644 --- a/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx +++ b/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx @@ -173,7 +173,7 @@ export const TreeItem2 = React.forwardRef(function TreeItem2( ) { const props = useThemeProps({ props: inProps, name: 'MuiTreeItem2' }); - const { id, nodeId, label, disabled, children, slots = {}, slotProps = {}, ...other } = props; + const { id, itemId, label, disabled, children, slots = {}, slotProps = {}, ...other } = props; const { getRootProps, @@ -184,7 +184,7 @@ export const TreeItem2 = React.forwardRef(function TreeItem2( status, } = useTreeItem2({ id, - nodeId, + itemId, children, label, disabled, @@ -252,7 +252,7 @@ export const TreeItem2 = React.forwardRef(function TreeItem2( }); return ( - + @@ -281,23 +281,23 @@ TreeItem2.propTypes = { classes: PropTypes.object, className: PropTypes.string, /** - * If `true`, the node is disabled. + * If `true`, the item is disabled. * @default false */ disabled: PropTypes.bool, /** - * The id attribute of the node. If not provided, it will be generated. + * The id attribute of the item. If not provided, it will be generated. */ id: PropTypes.string, /** - * The label of the node. + * The id of the item. + * Must be unique. */ - label: PropTypes.node, + itemId: PropTypes.string.isRequired, /** - * The id of the node. - * Must be unique. + * The label of the item. */ - nodeId: PropTypes.string.isRequired, + label: PropTypes.node, /** * This prop isn't supported. * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus. diff --git a/packages/x-tree-view/src/TreeItem2Provider/TreeItem2Provider.tsx b/packages/x-tree-view/src/TreeItem2Provider/TreeItem2Provider.tsx index 636641d35d75..29e07517d822 100644 --- a/packages/x-tree-view/src/TreeItem2Provider/TreeItem2Provider.tsx +++ b/packages/x-tree-view/src/TreeItem2Provider/TreeItem2Provider.tsx @@ -3,10 +3,10 @@ import { TreeItem2ProviderProps } from './TreeItem2Provider.types'; import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext'; function TreeItem2Provider(props: TreeItem2ProviderProps) { - const { children, nodeId } = props; + const { children, itemId } = props; const { wrapItem } = useTreeViewContext<[]>(); - return wrapItem({ children, nodeId }); + return wrapItem({ children, itemId }); } TreeItem2Provider.propTypes = { @@ -15,7 +15,7 @@ TreeItem2Provider.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- children: PropTypes.node, - nodeId: PropTypes.string.isRequired, + itemId: PropTypes.string.isRequired, } as any; export { TreeItem2Provider }; diff --git a/packages/x-tree-view/src/TreeItem2Provider/TreeItem2Provider.types.ts b/packages/x-tree-view/src/TreeItem2Provider/TreeItem2Provider.types.ts index 29cab33d5164..8ad31aca2197 100644 --- a/packages/x-tree-view/src/TreeItem2Provider/TreeItem2Provider.types.ts +++ b/packages/x-tree-view/src/TreeItem2Provider/TreeItem2Provider.types.ts @@ -3,5 +3,5 @@ import { TreeViewItemId } from '../models'; export interface TreeItem2ProviderProps { children: React.ReactNode; - nodeId: TreeViewItemId; + itemId: TreeViewItemId; } diff --git a/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx b/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx index e6db24c03562..020f82748e12 100644 --- a/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx +++ b/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx @@ -14,10 +14,10 @@ interface UseTreeItem2UtilsReturnValue { } export const useTreeItem2Utils = ({ - nodeId, + itemId, children, }: { - nodeId: string; + itemId: string; children: React.ReactNode; }): UseTreeItem2UtilsReturnValue => { const { @@ -27,10 +27,10 @@ export const useTreeItem2Utils = ({ const status: UseTreeItem2Status = { expandable: Boolean(Array.isArray(children) ? children.length : children), - expanded: instance.isNodeExpanded(nodeId), - focused: instance.isNodeFocused(nodeId), - selected: instance.isNodeSelected(nodeId), - disabled: instance.isNodeDisabled(nodeId), + expanded: instance.isNodeExpanded(itemId), + focused: instance.isNodeFocused(itemId), + selected: instance.isNodeSelected(itemId), + disabled: instance.isNodeDisabled(itemId), }; const handleExpansion = (event: React.MouseEvent) => { @@ -39,14 +39,14 @@ export const useTreeItem2Utils = ({ } if (!status.focused) { - instance.focusItem(event, nodeId); + instance.focusItem(event, itemId); } const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey); // If already expanded and trying to toggle selection don't close - if (status.expandable && !(multiple && instance.isNodeExpanded(nodeId))) { - instance.toggleNodeExpansion(event, nodeId); + if (status.expandable && !(multiple && instance.isNodeExpanded(itemId))) { + instance.toggleNodeExpansion(event, itemId); } }; @@ -56,19 +56,19 @@ export const useTreeItem2Utils = ({ } if (!status.focused) { - instance.focusItem(event, nodeId); + instance.focusItem(event, itemId); } const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey); if (multiple) { if (event.shiftKey) { - instance.selectRange(event, { end: nodeId }); + instance.selectRange(event, { end: itemId }); } else { - instance.selectNode(event, nodeId, true); + instance.selectNode(event, itemId, true); } } else { - instance.selectNode(event, nodeId); + instance.selectNode(event, itemId); } }; diff --git a/packages/x-tree-view/src/internals/models/plugin.ts b/packages/x-tree-view/src/internals/models/plugin.ts index aeacf008d090..0587d6b19e2c 100644 --- a/packages/x-tree-view/src/internals/models/plugin.ts +++ b/packages/x-tree-view/src/internals/models/plugin.ts @@ -144,7 +144,7 @@ export type TreeViewItemPlugin = ( ) => void | TreeViewItemPluginResponse; export type TreeItemWrapper = (params: { - nodeId: TreeViewItemId; + itemId: TreeViewItemId; children: React.ReactNode; }) => React.ReactNode; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.ts index 1b8930445364..a50f6ef3527c 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.ts @@ -15,16 +15,16 @@ export const useTreeViewExpansion: TreeViewPlugin }; const isNodeExpanded = React.useCallback( - (nodeId: string) => { + (itemId: string) => { return Array.isArray(models.expandedItems.value) - ? models.expandedItems.value.indexOf(nodeId) !== -1 + ? models.expandedItems.value.indexOf(itemId) !== -1 : false; }, [models.expandedItems.value], ); const isNodeExpandable = React.useCallback( - (nodeId: string) => !!instance.getNode(nodeId)?.expandable, + (itemId: string) => !!instance.getNode(itemId)?.expandable, [instance], ); @@ -51,8 +51,8 @@ export const useTreeViewExpansion: TreeViewPlugin }, ); - const expandAllSiblings = (event: React.KeyboardEvent, nodeId: string) => { - const node = instance.getNode(nodeId); + const expandAllSiblings = (event: React.KeyboardEvent, itemId: string) => { + const node = instance.getNode(itemId); const siblings = instance.getChildrenIds(node.parentId); const diff = siblings.filter( @@ -63,8 +63,8 @@ export const useTreeViewExpansion: TreeViewPlugin if (diff.length > 0) { if (params.onItemExpansionToggle) { - diff.forEach((newlyExpandedNodeId) => { - params.onItemExpansionToggle!(event, newlyExpandedNodeId, true); + diff.forEach((newlyExpandedItemId) => { + params.onItemExpansionToggle!(event, newlyExpandedItemId, true); }); } diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts index 966b89a82bf1..54fff61870b7 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts @@ -3,10 +3,10 @@ import { DefaultizedProps, TreeViewPluginSignature } from '../../models'; import { UseTreeViewNodesSignature } from '../useTreeViewNodes'; export interface UseTreeViewExpansionInstance { - isNodeExpanded: (nodeId: string) => boolean; - isNodeExpandable: (nodeId: string) => boolean; + isNodeExpanded: (itemId: string) => boolean; + isNodeExpandable: (itemId: string) => boolean; toggleNodeExpansion: (event: React.SyntheticEvent, value: string) => void; - expandAllSiblings: (event: React.KeyboardEvent, nodeId: string) => void; + expandAllSiblings: (event: React.KeyboardEvent, itemId: string) => void; } export interface UseTreeViewExpansionParameters { diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts index 0e90c9e787b3..e0aa4229e38d 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts @@ -17,10 +17,10 @@ export const useTreeViewFocus: TreeViewPlugin = ({ models, rootRef, }) => { - const setFocusedNodeId = useEventCallback((nodeId: React.SetStateAction) => { - const cleanNodeId = typeof nodeId === 'function' ? nodeId(state.focusedNodeId) : nodeId; - if (state.focusedNodeId !== cleanNodeId) { - setState((prevState) => ({ ...prevState, focusedNodeId: cleanNodeId })); + const setFocusedItemId = useEventCallback((itemId: React.SetStateAction) => { + const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedNodeId) : itemId; + if (state.focusedNodeId !== cleanItemId) { + setState((prevState) => ({ ...prevState, focusedNodeId: cleanItemId })); } }); @@ -30,24 +30,24 @@ export const useTreeViewFocus: TreeViewPlugin = ({ ); const isNodeFocused = React.useCallback( - (nodeId: string) => state.focusedNodeId === nodeId && isTreeViewFocused(), + (itemId: string) => state.focusedNodeId === itemId && isTreeViewFocused(), [state.focusedNodeId, isTreeViewFocused], ); - const isNodeVisible = (nodeId: string) => { - const node = instance.getNode(nodeId); + const isNodeVisible = (itemId: string) => { + const node = instance.getNode(itemId); return node && (node.parentId == null || instance.isNodeExpanded(node.parentId)); }; - const focusItem = useEventCallback((event: React.SyntheticEvent, nodeId: string | null) => { - // if we receive a nodeId, and it is visible, the focus will be set to it - if (nodeId && isNodeVisible(nodeId)) { + const focusItem = useEventCallback((event: React.SyntheticEvent, itemId: string | null) => { + // if we receive an itemId, and it is visible, the focus will be set to it + if (itemId && isNodeVisible(itemId)) { if (!isTreeViewFocused()) { instance.focusRoot(); } - setFocusedNodeId(nodeId); + setFocusedItemId(itemId); if (params.onItemFocus) { - params.onItemFocus(event, nodeId); + params.onItemFocus(event, itemId); } } }); @@ -64,7 +64,7 @@ export const useTreeViewFocus: TreeViewPlugin = ({ nodeToFocusId = instance.getNavigableChildrenIds(null)[0]; } - setFocusedNodeId(nodeToFocusId); + setFocusedItemId(nodeToFocusId); if (params.onItemFocus) { params.onItemFocus(event, nodeToFocusId); } @@ -86,14 +86,14 @@ export const useTreeViewFocus: TreeViewPlugin = ({ }); useInstanceEventHandler(instance, 'removeNode', ({ id }) => { - setFocusedNodeId((oldFocusedNodeId) => { + setFocusedItemId((oldFocusedItemId) => { if ( - oldFocusedNodeId === id && + oldFocusedItemId === id && rootRef.current === ownerDocument(rootRef.current).activeElement ) { return instance.getChildrenIds(null)[0]; } - return oldFocusedNodeId; + return oldFocusedItemId; }); }); @@ -109,7 +109,7 @@ export const useTreeViewFocus: TreeViewPlugin = ({ const createHandleBlur = (otherHandlers: EventHandlers) => (event: React.FocusEvent) => { otherHandlers.onBlur?.(event); - setFocusedNodeId(null); + setFocusedItemId(null); }; const focusedNode = instance.getNode(state.focusedNodeId!); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts index c9294f14d09d..f6013ad19ab7 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts @@ -6,7 +6,7 @@ import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection'; import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion'; export interface UseTreeViewFocusInstance { - isNodeFocused: (nodeId: string) => boolean; + isNodeFocused: (itemId: string) => boolean; focusItem: (event: React.SyntheticEvent, itemId: string | null) => void; focusDefaultNode: (event: React.SyntheticEvent) => void; focusRoot: () => void; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewId/useTreeViewId.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewId/useTreeViewId.ts index 71af0f6d6430..2e97b58bd0dd 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewId/useTreeViewId.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewId/useTreeViewId.ts @@ -8,7 +8,7 @@ export const useTreeViewId: TreeViewPlugin = ({ instance const treeId = useId(params.id); const getTreeItemId = React.useCallback( - (nodeId: string, idAttribute: string | undefined) => idAttribute ?? `${treeId}-${nodeId}`, + (itemId: string, idAttribute: string | undefined) => idAttribute ?? `${treeId}-${itemId}`, [treeId], ); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewId/useTreeViewId.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewId/useTreeViewId.types.ts index 9d249a49da95..e7b84528bfe4 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewId/useTreeViewId.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewId/useTreeViewId.types.ts @@ -1,7 +1,7 @@ import { TreeViewPluginSignature } from '../../models'; export interface UseTreeViewIdInstance { - getTreeItemId: (nodeId: string, idAttribute: string | undefined) => string; + getTreeItemId: (itemId: string, idAttribute: string | undefined) => string; } export interface UseTreeViewIdParameters { diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.tsx index 51f8ca2acf19..7ac7809b31e2 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.tsx @@ -42,12 +42,12 @@ export const useTreeViewJSXNodes: TreeViewPlugin = }); }); - const removeJSXNode = useEventCallback((nodeId: string) => { + const removeJSXNode = useEventCallback((itemId: string) => { setState((prevState) => { const newNodeMap = { ...prevState.nodes.nodeMap }; const newItemMap = { ...prevState.nodes.itemMap }; - delete newNodeMap[nodeId]; - delete newItemMap[nodeId]; + delete newNodeMap[itemId]; + delete newItemMap[itemId]; return { ...prevState, nodes: { @@ -57,19 +57,19 @@ export const useTreeViewJSXNodes: TreeViewPlugin = }, }; }); - publishTreeViewEvent(instance, 'removeNode', { id: nodeId }); + publishTreeViewEvent(instance, 'removeNode', { id: itemId }); }); - const mapFirstCharFromJSX = useEventCallback((nodeId: string, firstChar: string) => { + const mapFirstCharFromJSX = useEventCallback((itemId: string, firstChar: string) => { instance.updateFirstCharMap((firstCharMap) => { - firstCharMap[nodeId] = firstChar; + firstCharMap[itemId] = firstChar; return firstCharMap; }); return () => { instance.updateFirstCharMap((firstCharMap) => { const newMap = { ...firstCharMap }; - delete newMap[nodeId]; + delete newMap[itemId]; return newMap; }); }; @@ -87,7 +87,7 @@ const useTreeViewJSXNodesItemPlugin: TreeViewItemPlugin { - const { children, disabled = false, label, nodeId, id } = props; + const { children, disabled = false, label, itemId, id } = props; const { instance } = useTreeViewContext<[UseTreeViewJSXNodesSignature]>(); @@ -109,9 +109,9 @@ const useTreeViewJSXNodesItemPlugin: TreeViewItemPlugin( () => ({ element: treeItemElement!, - id: nodeId, + id: itemId, }), - [nodeId, treeItemElement], + [itemId, treeItemElement], ); const { index, parentId } = useDescendant(descendant); @@ -120,7 +120,7 @@ const useTreeViewJSXNodesItemPlugin: TreeViewItemPlugin instance.removeJSXNode(nodeId); + return () => instance.removeJSXNode(itemId); } return undefined; - }, [instance, parentId, index, nodeId, expandable, disabled, id]); + }, [instance, parentId, index, itemId, expandable, disabled, id]); React.useEffect(() => { if (label) { return instance.mapFirstCharFromJSX( - nodeId, + itemId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase(), ); } return undefined; - }, [instance, nodeId, label]); + }, [instance, itemId, label]); return { contentRef: handleContentRef, @@ -152,8 +152,8 @@ const useTreeViewJSXNodesItemPlugin: TreeViewItemPlugin ( - {children} +useTreeViewJSXNodes.wrapItem = ({ children, itemId }) => ( + {children} ); useTreeViewJSXNodes.params = {}; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.ts index e5aa62ec412b..7567e90b10c4 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.ts @@ -4,8 +4,8 @@ import { UseTreeViewKeyboardNavigationSignature } from '../useTreeViewKeyboardNa export interface UseTreeViewNodesInstance { insertJSXNode: (node: TreeViewNode) => void; - removeJSXNode: (nodeId: string) => void; - mapFirstCharFromJSX: (nodeId: string, firstChar: string) => () => void; + removeJSXNode: (itemId: string) => void; + mapFirstCharFromJSX: (itemId: string, firstChar: string) => () => void; } export interface UseTreeViewNodesParameters {} diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts index 48acfb2c2e83..f5abd106a576 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts @@ -50,12 +50,12 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< return; } - const newFirstCharMap: { [nodeId: string]: string } = {}; + const newFirstCharMap: { [itemId: string]: string } = {}; const processItem = (item: TreeViewBaseItem) => { const getItemId = params.getItemId; - const nodeId = getItemId ? getItemId(item) : (item as { id: string }).id; - newFirstCharMap[nodeId] = instance.getNode(nodeId).label!.substring(0, 1).toLowerCase(); + const itemId = getItemId ? getItemId(item) : (item as { id: string }).id; + newFirstCharMap[itemId] = instance.getNode(itemId).label!.substring(0, 1).toLowerCase(); item.children?.forEach(processItem); }; @@ -67,7 +67,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< updateFirstCharMap, }); - const getFirstMatchingNode = (nodeId: string, firstChar: string) => { + const getFirstMatchingItem = (itemId: string, firstChar: string) => { let start: number; let index: number; const lowercaseChar = firstChar.toLowerCase(); @@ -75,21 +75,21 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< const firstCharIds: string[] = []; const firstChars: string[] = []; // This really only works since the ids are strings - Object.keys(firstCharMap.current).forEach((mapNodeId) => { - const map = instance.getNode(mapNodeId); + Object.keys(firstCharMap.current).forEach((mapItemId) => { + const map = instance.getNode(mapItemId); const visible = map.parentId ? instance.isNodeExpanded(map.parentId) : true; const shouldBeSkipped = params.disabledItemsFocusable ? false - : instance.isNodeDisabled(mapNodeId); + : instance.isNodeDisabled(mapItemId); if (visible && !shouldBeSkipped) { - firstCharIds.push(mapNodeId); - firstChars.push(firstCharMap.current[mapNodeId]); + firstCharIds.push(mapItemId); + firstChars.push(firstCharMap.current[mapItemId]); } }); // Get start index for search based on position of currentItem - start = firstCharIds.indexOf(nodeId) + 1; + start = firstCharIds.indexOf(itemId) + 1; if (start >= firstCharIds.length) { start = 0; } @@ -110,11 +110,11 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< return null; }; - const canToggleNodeSelection = (nodeId: string) => - !params.disableSelection && !instance.isNodeDisabled(nodeId); + const canToggleItemSelection = (itemId: string) => + !params.disableSelection && !instance.isNodeDisabled(itemId); - const canToggleNodeExpansion = (nodeId: string) => { - return !instance.isNodeDisabled(nodeId) && instance.isNodeExpandable(nodeId); + const canToggleItemExpansion = (itemId: string) => { + return !instance.isNodeDisabled(itemId) && instance.isNodeExpandable(itemId); }; // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction @@ -138,7 +138,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< // eslint-disable-next-line default-case switch (true) { // Select the node when pressing "Space" - case key === ' ' && canToggleNodeSelection(state.focusedNodeId): { + case key === ' ' && canToggleItemSelection(state.focusedNodeId): { event.preventDefault(); if (params.multiSelect && event.shiftKey) { instance.selectRange(event, { end: state.focusedNodeId }); @@ -153,10 +153,10 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< // If the focused node has children, we expand it. // If the focused node has no children, we select it. case key === 'Enter': { - if (canToggleNodeExpansion(state.focusedNodeId)) { + if (canToggleItemExpansion(state.focusedNodeId)) { instance.toggleNodeExpansion(event, state.focusedNodeId); event.preventDefault(); - } else if (canToggleNodeSelection(state.focusedNodeId)) { + } else if (canToggleItemSelection(state.focusedNodeId)) { if (params.multiSelect) { event.preventDefault(); instance.selectNode(event, state.focusedNodeId, true); @@ -169,20 +169,20 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< break; } - // Focus the next focusable node + // Focus the next focusable item case key === 'ArrowDown': { - const nextNode = getNextNode(instance, state.focusedNodeId); - if (nextNode) { + const nextItem = getNextNode(instance, state.focusedNodeId); + if (nextItem) { event.preventDefault(); - instance.focusItem(event, nextNode); + instance.focusItem(event, nextItem); // Multi select behavior when pressing Shift + ArrowDown - // Toggles the selection state of the next node - if (params.multiSelect && event.shiftKey && canToggleNodeSelection(nextNode)) { + // Toggles the selection state of the next item + if (params.multiSelect && event.shiftKey && canToggleItemSelection(nextItem)) { instance.selectRange( event, { - end: nextNode, + end: nextItem, current: state.focusedNodeId, }, true, @@ -193,20 +193,20 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< break; } - // Focuses the previous focusable node + // Focuses the previous focusable item case key === 'ArrowUp': { - const previousNode = getPreviousNode(instance, state.focusedNodeId); - if (previousNode) { + const previousItem = getPreviousNode(instance, state.focusedNodeId); + if (previousItem) { event.preventDefault(); - instance.focusItem(event, previousNode); + instance.focusItem(event, previousItem); // Multi select behavior when pressing Shift + ArrowUp - // Toggles the selection state of the previous node - if (params.multiSelect && event.shiftKey && canToggleNodeSelection(previousNode)) { + // Toggles the selection state of the previous item + if (params.multiSelect && event.shiftKey && canToggleItemSelection(previousItem)) { instance.selectRange( event, { - end: previousNode, + end: previousItem, current: state.focusedNodeId, }, true, @@ -217,13 +217,13 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< break; } - // If the focused node is expanded, we move the focus to its first child - // If the focused node is collapsed and has children, we expand it + // If the focused item is expanded, we move the focus to its first child + // If the focused item is collapsed and has children, we expand it case (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL): { if (instance.isNodeExpanded(state.focusedNodeId)) { instance.focusItem(event, getNextNode(instance, state.focusedNodeId)); event.preventDefault(); - } else if (canToggleNodeExpansion(state.focusedNodeId)) { + } else if (canToggleItemExpansion(state.focusedNodeId)) { instance.toggleNodeExpansion(event, state.focusedNodeId); event.preventDefault(); } @@ -231,11 +231,11 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< break; } - // If the focused node is expanded, we collapse it - // If the focused node is collapsed and has a parent, we move the focus to this parent + // If the focused item is expanded, we collapse it + // If the focused item is collapsed and has a parent, we move the focus to this parent case (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL): { if ( - canToggleNodeExpansion(state.focusedNodeId) && + canToggleItemExpansion(state.focusedNodeId) && instance.isNodeExpanded(state.focusedNodeId) ) { instance.toggleNodeExpansion(event, state.focusedNodeId!); @@ -258,7 +258,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< // Multi select behavior when pressing Ctrl + Shift + Home // Selects the focused node and all nodes up to the first node. if ( - canToggleNodeSelection(state.focusedNodeId) && + canToggleItemSelection(state.focusedNodeId) && params.multiSelect && ctrlPressed && event.shiftKey @@ -270,14 +270,14 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< break; } - // Focuses the last node in the tree + // Focuses the last item in the tree case key === 'End': { instance.focusItem(event, getLastNode(instance)); // Multi select behavior when pressing Ctrl + Shirt + End - // Selects the focused node and all the nodes down to the last node. + // Selects the focused item and all the items down to the last item. if ( - canToggleNodeSelection(state.focusedNodeId) && + canToggleItemSelection(state.focusedNodeId) && params.multiSelect && ctrlPressed && event.shiftKey @@ -289,7 +289,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< break; } - // Expand all siblings that are at the same level as the focused node + // Expand all siblings that are at the same level as the focused item case key === '*': { instance.expandAllSiblings(event, state.focusedNodeId); event.preventDefault(); @@ -310,7 +310,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< // Type-ahead // TODO: Support typing multiple characters case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key): { - const matchingNode = getFirstMatchingNode(state.focusedNodeId, key); + const matchingNode = getFirstMatchingItem(state.focusedNodeId, key); if (matchingNode != null) { instance.focusItem(event, matchingNode); event.preventDefault(); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts index a3502830bdcb..9727caa58e11 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts @@ -18,4 +18,4 @@ export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{ ]; }>; -export type TreeViewFirstCharMap = { [nodeId: string]: string }; +export type TreeViewFirstCharMap = { [itemId: string]: string }; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.test.tsx index af8da91e18ef..28f3e2b1f398 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.test.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.test.tsx @@ -46,8 +46,8 @@ describe('useTreeViewNodes', () => { render( - - + + , ), diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.ts index 54ca801486d6..15fa2ab2665b 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.ts @@ -6,7 +6,7 @@ import { UseTreeViewNodesSignature, UseTreeViewNodesDefaultizedParameters, TreeViewNodeMap, - TreeViewNodeIdAndChildren, + TreeViewItemIdAndChildren, UseTreeViewNodesState, TreeViewItemMap, } from './useTreeViewNodes.types'; @@ -29,7 +29,7 @@ const updateNodesState = ({ item: TreeViewBaseItem, index: number, parentId: string | null, - ): TreeViewNodeIdAndChildren => { + ): TreeViewItemIdAndChildren => { const id: string = getItemId ? getItemId(item) : (item as any).id; if (id == null) { @@ -100,35 +100,35 @@ export const useTreeViewNodes: TreeViewPlugin = ({ setState, }) => { const getNode = React.useCallback( - (nodeId: string) => state.nodes.nodeMap[nodeId], + (itemId: string) => state.nodes.nodeMap[itemId], [state.nodes.nodeMap], ); const getItem = React.useCallback( - (nodeId: string) => state.nodes.itemMap[nodeId], + (itemId: string) => state.nodes.itemMap[itemId], [state.nodes.itemMap], ); const isNodeDisabled = React.useCallback( - (nodeId: string | null): nodeId is string => { - if (nodeId == null) { + (itemId: string | null): itemId is string => { + if (itemId == null) { return false; } - let node = instance.getNode(nodeId); + let item = instance.getNode(itemId); - // This can be called before the node has been added to the node map. - if (!node) { + // This can be called before the item has been added to the node map. + if (!item) { return false; } - if (node.disabled) { + if (item.disabled) { return true; } - while (node.parentId != null) { - node = instance.getNode(node.parentId); - if (node.disabled) { + while (item.parentId != null) { + item = instance.getNode(item.parentId); + if (item.disabled) { return true; } } @@ -138,18 +138,18 @@ export const useTreeViewNodes: TreeViewPlugin = ({ [instance], ); - const getChildrenIds = useEventCallback((nodeId: string | null) => + const getChildrenIds = useEventCallback((itemId: string | null) => Object.values(state.nodes.nodeMap) - .filter((node) => node.parentId === nodeId) + .filter((item) => item.parentId === itemId) .sort((a, b) => a.index - b.index) .map((child) => child.id), ); - const getNavigableChildrenIds = (nodeId: string | null) => { - let childrenIds = instance.getChildrenIds(nodeId); + const getNavigableChildrenIds = (itemId: string | null) => { + let childrenIds = instance.getChildrenIds(itemId); if (!params.disabledItemsFocusable) { - childrenIds = childrenIds.filter((node) => !instance.isNodeDisabled(node)); + childrenIds = childrenIds.filter((item) => !instance.isNodeDisabled(item)); } return childrenIds; }; @@ -181,20 +181,20 @@ export const useTreeViewNodes: TreeViewPlugin = ({ ]); const getNodesToRender = () => { - const getPropsFromNodeId = ({ + const getPropsFromItemId = ({ id, children, - }: TreeViewNodeIdAndChildren): ReturnType[number] => { + }: TreeViewItemIdAndChildren): ReturnType[number] => { const node = state.nodes.nodeMap[id]; return { label: node.label!, - nodeId: node.id, + itemId: node.id, id: node.idAttribute, - children: children?.map(getPropsFromNodeId), + children: children?.map(getPropsFromItemId), }; }; - return state.nodes.nodeTree.map(getPropsFromNodeId); + return state.nodes.nodeTree.map(getPropsFromItemId); }; populateInstance(instance, { diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.ts index 11fddd41fe57..55a5bc1c52c9 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.ts @@ -3,18 +3,18 @@ import { TreeViewItemId } from '../../../models'; interface TreeViewNodeProps { label: string; - nodeId: string; + itemId: string; id: string | undefined; children?: TreeViewNodeProps[]; } export interface UseTreeViewNodesInstance { - getNode: (nodeId: string) => TreeViewNode; - getItem: (nodeId: string) => R; + getNode: (itemId: string) => TreeViewNode; + getItem: (itemId: string) => R; getNodesToRender: () => TreeViewNodeProps[]; - getChildrenIds: (nodeId: string | null) => string[]; - getNavigableChildrenIds: (nodeId: string | null) => string[]; - isNodeDisabled: (nodeId: string | null) => nodeId is string; + getChildrenIds: (itemId: string | null) => string[]; + getNavigableChildrenIds: (itemId: string | null) => string[]; + isNodeDisabled: (itemId: string | null) => itemId is string; } export interface UseTreeViewNodesPublicAPI @@ -65,14 +65,14 @@ interface UseTreeViewNodesEventLookup { }; } -export interface TreeViewNodeIdAndChildren { +export interface TreeViewItemIdAndChildren { id: TreeViewItemId; - children?: TreeViewNodeIdAndChildren[]; + children?: TreeViewItemIdAndChildren[]; } export interface UseTreeViewNodesState { nodes: { - nodeTree: TreeViewNodeIdAndChildren[]; + nodeTree: TreeViewItemIdAndChildren[]; nodeMap: TreeViewNodeMap; itemMap: TreeViewItemMap; }; @@ -91,6 +91,6 @@ export type UseTreeViewNodesSignature = TreeViewPluginSignature<{ contextValue: UseTreeViewNodesContextValue; }>; -export type TreeViewNodeMap = { [nodeId: string]: TreeViewNode }; +export type TreeViewNodeMap = { [itemId: string]: TreeViewNode }; -export type TreeViewItemMap = { [nodeId: string]: R }; +export type TreeViewItemMap = { [itemId: string]: R }; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts index 1d818fdf74ea..af9da8dffe5c 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts @@ -55,12 +55,12 @@ export const useTreeViewSelection: TreeViewPlugin models.selectedItems.setControlledValue(newSelectedItems); }; - const isNodeSelected = (nodeId: string) => + const isNodeSelected = (itemId: string) => Array.isArray(models.selectedItems.value) - ? models.selectedItems.value.indexOf(nodeId) !== -1 - : models.selectedItems.value === nodeId; + ? models.selectedItems.value.indexOf(itemId) !== -1 + : models.selectedItems.value === itemId; - const selectNode = (event: React.SyntheticEvent, nodeId: string, multiple = false) => { + const selectNode = (event: React.SyntheticEvent, itemId: string, multiple = false) => { if (params.disableSelection) { return; } @@ -68,19 +68,19 @@ export const useTreeViewSelection: TreeViewPlugin if (multiple) { if (Array.isArray(models.selectedItems.value)) { let newSelected: string[]; - if (models.selectedItems.value.indexOf(nodeId) !== -1) { - newSelected = models.selectedItems.value.filter((id) => id !== nodeId); + if (models.selectedItems.value.indexOf(itemId) !== -1) { + newSelected = models.selectedItems.value.filter((id) => id !== itemId); } else { - newSelected = [nodeId].concat(models.selectedItems.value); + newSelected = [itemId].concat(models.selectedItems.value); } setSelectedItems(event, newSelected); } } else { - const newSelected = params.multiSelect ? [nodeId] : nodeId; + const newSelected = params.multiSelect ? [itemId] : itemId; setSelectedItems(event, newSelected); } - lastSelectedNode.current = nodeId; + lastSelectedNode.current = itemId; lastSelectionWasRange.current = false; currentRangeSelection.current = []; }; @@ -161,12 +161,12 @@ export const useTreeViewSelection: TreeViewPlugin lastSelectionWasRange.current = true; }; - const rangeSelectToFirst = (event: React.KeyboardEvent, nodeId: string) => { + const rangeSelectToFirst = (event: React.KeyboardEvent, itemId: string) => { if (!lastSelectedNode.current) { - lastSelectedNode.current = nodeId; + lastSelectedNode.current = itemId; } - const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId; + const start = lastSelectionWasRange.current ? lastSelectedNode.current : itemId; instance.selectRange(event, { start, @@ -174,12 +174,12 @@ export const useTreeViewSelection: TreeViewPlugin }); }; - const rangeSelectToLast = (event: React.KeyboardEvent, nodeId: string) => { + const rangeSelectToLast = (event: React.KeyboardEvent, itemId: string) => { if (!lastSelectedNode.current) { - lastSelectedNode.current = nodeId; + lastSelectedNode.current = itemId; } - const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId; + const start = lastSelectionWasRange.current ? lastSelectedNode.current : itemId; instance.selectRange(event, { start, diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts index 5ad17089bd11..e14cf7c8666d 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts @@ -4,11 +4,11 @@ import { UseTreeViewNodesSignature } from '../useTreeViewNodes'; import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion'; export interface UseTreeViewSelectionInstance { - isNodeSelected: (nodeId: string) => boolean; - selectNode: (event: React.SyntheticEvent, nodeId: string, multiple?: boolean) => void; + isNodeSelected: (itemId: string) => boolean; + selectNode: (event: React.SyntheticEvent, itemId: string, multiple?: boolean) => void; selectRange: (event: React.SyntheticEvent, nodes: TreeViewItemRange, stacked?: boolean) => void; - rangeSelectToFirst: (event: React.KeyboardEvent, nodeId: string) => void; - rangeSelectToLast: (event: React.KeyboardEvent, nodeId: string) => void; + rangeSelectToFirst: (event: React.KeyboardEvent, itemId: string) => void; + rangeSelectToLast: (event: React.KeyboardEvent, itemId: string) => void; } type TreeViewSelectionValue = Multiple extends true diff --git a/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts b/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts index 0fd10e4d5687..b8e847672800 100644 --- a/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts +++ b/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts @@ -141,10 +141,10 @@ export const useTreeView = plugin.wrapItem) .filter((wrapItem): wrapItem is TreeItemWrapper => !!wrapItem); - contextValue.wrapItem = ({ nodeId, children }) => { + contextValue.wrapItem = ({ itemId, children }) => { let finalChildren: React.ReactNode = children; itemWrappers.forEach((itemWrapper) => { - finalChildren = itemWrapper({ nodeId, children: finalChildren }); + finalChildren = itemWrapper({ itemId, children: finalChildren }); }); return finalChildren; diff --git a/packages/x-tree-view/src/internals/useTreeView/useTreeView.utils.ts b/packages/x-tree-view/src/internals/useTreeView/useTreeView.utils.ts index a960b0e3e640..6e374cb568bb 100644 --- a/packages/x-tree-view/src/internals/useTreeView/useTreeView.utils.ts +++ b/packages/x-tree-view/src/internals/useTreeView/useTreeView.utils.ts @@ -9,48 +9,48 @@ import type { UseTreeViewNodesSignature } from '../plugins/useTreeViewNodes'; export const getPreviousNode = ( instance: TreeViewInstance<[UseTreeViewNodesSignature, UseTreeViewExpansionSignature]>, - nodeId: string, + itemId: string, ) => { - const node = instance.getNode(nodeId); - const siblings = instance.getNavigableChildrenIds(node.parentId); - const nodeIndex = siblings.indexOf(nodeId); + const item = instance.getNode(itemId); + const siblings = instance.getNavigableChildrenIds(item.parentId); + const itemIndex = siblings.indexOf(itemId); - if (nodeIndex === 0) { - return node.parentId; + if (itemIndex === 0) { + return item.parentId; } - let currentNode: string = siblings[nodeIndex - 1]; + let currentItem: string = siblings[itemIndex - 1]; while ( - instance.isNodeExpanded(currentNode) && - instance.getNavigableChildrenIds(currentNode).length > 0 + instance.isNodeExpanded(currentItem) && + instance.getNavigableChildrenIds(currentItem).length > 0 ) { - currentNode = instance.getNavigableChildrenIds(currentNode).pop()!; + currentItem = instance.getNavigableChildrenIds(currentItem).pop()!; } - return currentNode; + return currentItem; }; export const getNextNode = ( instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>, - nodeId: string, + itemId: string, ) => { // If expanded get first child - if (instance.isNodeExpanded(nodeId) && instance.getNavigableChildrenIds(nodeId).length > 0) { - return instance.getNavigableChildrenIds(nodeId)[0]; + if (instance.isNodeExpanded(itemId) && instance.getNavigableChildrenIds(itemId).length > 0) { + return instance.getNavigableChildrenIds(itemId)[0]; } - let node = instance.getNode(nodeId); - while (node != null) { + let item = instance.getNode(itemId); + while (item != null) { // Try to get next sibling - const siblings = instance.getNavigableChildrenIds(node.parentId); - const nextSibling = siblings[siblings.indexOf(node.id) + 1]; + const siblings = instance.getNavigableChildrenIds(item.parentId); + const nextSibling = siblings[siblings.indexOf(item.id) + 1]; if (nextSibling) { return nextSibling; } // If the sibling does not exist, go up a level to the parent and try again. - node = instance.getNode(node.parentId!); + item = instance.getNode(item.parentId!); } return null; @@ -59,12 +59,12 @@ export const getNextNode = ( export const getLastNode = ( instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>, ) => { - let lastNode = instance.getNavigableChildrenIds(null).pop()!; + let lastItem = instance.getNavigableChildrenIds(null).pop()!; - while (instance.isNodeExpanded(lastNode)) { - lastNode = instance.getNavigableChildrenIds(lastNode).pop()!; + while (instance.isNodeExpanded(lastItem)) { + lastItem = instance.getNavigableChildrenIds(lastItem).pop()!; } - return lastNode; + return lastItem; }; export const getFirstNode = (instance: TreeViewInstance<[UseTreeViewNodesSignature]>) => diff --git a/packages/x-tree-view/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-tree-view/src/themeAugmentation/themeAugmentation.spec.ts index e7f29833807e..e90c0a986079 100644 --- a/packages/x-tree-view/src/themeAugmentation/themeAugmentation.spec.ts +++ b/packages/x-tree-view/src/themeAugmentation/themeAugmentation.spec.ts @@ -65,7 +65,7 @@ createTheme({ }, MuiTreeItem: { defaultProps: { - nodeId: '1', + itemId: '1', // @ts-expect-error invalid MuiTreeItem prop someRandomProp: true, }, @@ -84,7 +84,7 @@ createTheme({ }, MuiTreeItem2: { defaultProps: { - nodeId: '1', + itemId: '1', // @ts-expect-error invalid MuiTreeItem2 prop someRandomProp: true, }, diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts index 09e5d548d739..a23ecf339d03 100644 --- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts +++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts @@ -26,11 +26,11 @@ export const useTreeItem2 = (); - const { id, nodeId, label, children, rootRef } = parameters; + const { id, itemId, label, children, rootRef } = parameters; const { rootRef: pluginRootRef, contentRef } = runItemPlugins(parameters); - const { interactions, status } = useTreeItem2Utils({ nodeId, children }); - const idAttribute = instance.getTreeItemId(nodeId, id); + const { interactions, status } = useTreeItem2Utils({ itemId, children }); + const idAttribute = instance.getTreeItemId(itemId, id); const handleRootRef = useForkRef(rootRef, pluginRootRef)!; const createRootHandleFocus = @@ -48,7 +48,7 @@ export const useTreeItem2 = ;