From 8644e2a46b971890238fd675b54fb00bd13c507e Mon Sep 17 00:00:00 2001
From: Nora <72460825+noraleonte@users.noreply.github.com>
Date: Thu, 28 Mar 2024 11:29:23 +0200
Subject: [PATCH] [TreeView] Clean the usage of the term "item" and "node" in
the internal API (#12449)
---
.../headless/LogExpandedItems.js | 8 +-
.../headless/LogExpandedItems.tsx | 10 +--
.../pages/x/api/tree-view/rich-tree-view.json | 6 +-
.../x/api/tree-view/simple-tree-view.json | 6 +-
docs/pages/x/api/tree-view/tree-item-2.json | 8 +-
docs/pages/x/api/tree-view/tree-item.json | 2 +-
docs/pages/x/api/tree-view/tree-view.json | 6 +-
.../rich-tree-view/rich-tree-view.json | 6 +-
.../simple-tree-view/simple-tree-view.json | 6 +-
.../tree-view/tree-item-2/tree-item-2.json | 8 +-
.../tree-view/tree-item/tree-item.json | 2 +-
.../tree-view/tree-view/tree-view.json | 6 +-
.../src/RichTreeView/RichTreeView.tsx | 10 +--
.../SimpleTreeView/SimpleTreeView.plugins.ts | 4 +-
.../src/TreeItem/TreeItem.test.tsx | 88 +++++++++----------
.../x-tree-view/src/TreeItem/TreeItem.tsx | 8 +-
.../src/TreeItem/treeItemClasses.ts | 2 +-
.../src/TreeItem/useTreeItemState.ts | 18 ++--
.../src/TreeItem2Icon/TreeItem2Icon.types.ts | 8 +-
.../useTreeItem2Utils/useTreeItem2Utils.tsx | 16 ++--
.../TreeViewProvider/DescendantProvider.tsx | 2 +-
packages/x-tree-view/src/internals/index.ts | 4 +-
.../src/internals/plugins/defaultPlugins.ts | 6 +-
.../useTreeViewExpansion.ts | 18 ++--
.../useTreeViewExpansion.types.ts | 10 +--
.../useTreeViewFocus/useTreeViewFocus.ts | 68 +++++++-------
.../useTreeViewFocus.types.ts | 12 +--
.../useTreeViewIcons.types.ts | 12 +--
.../useTreeViewId/useTreeViewId.types.ts | 2 +-
.../plugins/useTreeViewItems/index.ts | 6 ++
.../useTreeViewItems.test.tsx} | 2 +-
.../useTreeViewItems.ts} | 86 +++++++++---------
.../useTreeViewItems.types.ts} | 48 +++++-----
.../plugins/useTreeViewJSXItems/index.ts | 6 ++
.../useTreeViewJSXItems.tsx} | 52 +++++------
.../useTreeViewJSXItems.types.ts | 20 +++++
.../plugins/useTreeViewJSXNodes/index.ts | 6 --
.../useTreeViewJSXNodes.types.ts | 20 -----
.../useTreeViewKeyboardNavigation.ts | 76 ++++++++--------
.../useTreeViewKeyboardNavigation.types.ts | 4 +-
.../plugins/useTreeViewNodes/index.ts | 6 --
.../useTreeViewSelection.ts | 70 +++++++--------
.../useTreeViewSelection.types.ts | 12 +--
.../useTreeViewSelection.utils.ts | 14 +--
.../useTreeView/useTreeView.utils.ts | 38 ++++----
45 files changed, 414 insertions(+), 414 deletions(-)
create mode 100644 packages/x-tree-view/src/internals/plugins/useTreeViewItems/index.ts
rename packages/x-tree-view/src/internals/plugins/{useTreeViewNodes/useTreeViewNodes.test.tsx => useTreeViewItems/useTreeViewItems.test.tsx} (98%)
rename packages/x-tree-view/src/internals/plugins/{useTreeViewNodes/useTreeViewNodes.ts => useTreeViewItems/useTreeViewItems.ts} (74%)
rename packages/x-tree-view/src/internals/plugins/{useTreeViewNodes/useTreeViewNodes.types.ts => useTreeViewItems/useTreeViewItems.types.ts} (67%)
create mode 100644 packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/index.ts
rename packages/x-tree-view/src/internals/plugins/{useTreeViewJSXNodes/useTreeViewJSXNodes.tsx => useTreeViewJSXItems/useTreeViewJSXItems.tsx} (73%)
create mode 100644 packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.types.ts
delete mode 100644 packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/index.ts
delete mode 100644 packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.ts
delete mode 100644 packages/x-tree-view/src/internals/plugins/useTreeViewNodes/index.ts
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 fbccfb57e3c2..a9b775cd40e2 100644
--- a/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js
+++ b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js
@@ -55,12 +55,12 @@ function TreeView(inProps) {
ownerState,
});
- const nodesToRender = instance.getNodesToRender();
+ const itemsToRender = instance.getItemsToRender();
- const renderNode = ({ children: itemChildren, ...itemProps }) => {
+ const renderItem = ({ children: itemChildren, ...itemProps }) => {
return (
- {itemChildren?.map(renderNode)}
+ {itemChildren?.map(renderItem)}
);
};
@@ -68,7 +68,7 @@ function TreeView(inProps) {
return (
- {nodesToRender.map(renderNode)}
+ {itemsToRender.map(renderItem)}
);
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 c8decec9b3ca..67d52862b7ca 100644
--- a/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx
+++ b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx
@@ -104,15 +104,15 @@ function TreeView(
ownerState,
});
- const nodesToRender = instance.getNodesToRender();
+ const itemsToRender = instance.getItemsToRender();
- const renderNode = ({
+ const renderItem = ({
children: itemChildren,
...itemProps
- }: ReturnType[number]) => {
+ }: ReturnType[number]) => {
return (
- {itemChildren?.map(renderNode)}
+ {itemChildren?.map(renderItem)}
);
};
@@ -120,7 +120,7 @@ function TreeView(
return (
- {nodesToRender.map(renderNode)}
+ {itemsToRender.map(renderItem)}
);
diff --git a/docs/pages/x/api/tree-view/rich-tree-view.json b/docs/pages/x/api/tree-view/rich-tree-view.json
index 181ae591f91c..bb5084be2972 100644
--- a/docs/pages/x/api/tree-view/rich-tree-view.json
+++ b/docs/pages/x/api/tree-view/rich-tree-view.json
@@ -110,17 +110,17 @@
},
{
"name": "collapseIcon",
- "description": "The default icon used to collapse the node.",
+ "description": "The default icon used to collapse the item.",
"class": null
},
{
"name": "expandIcon",
- "description": "The default icon used to expand the node.",
+ "description": "The default icon used to expand the item.",
"class": null
},
{
"name": "endIcon",
- "description": "The default icon displayed next to an end node.\nThis is applied to all tree nodes and can be overridden by the TreeItem `icon` slot prop.",
+ "description": "The default icon displayed next to an end item.\nThis is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.",
"class": null
}
],
diff --git a/docs/pages/x/api/tree-view/simple-tree-view.json b/docs/pages/x/api/tree-view/simple-tree-view.json
index 5957aad77056..0a4bd4f7b2da 100644
--- a/docs/pages/x/api/tree-view/simple-tree-view.json
+++ b/docs/pages/x/api/tree-view/simple-tree-view.json
@@ -75,17 +75,17 @@
},
{
"name": "collapseIcon",
- "description": "The default icon used to collapse the node.",
+ "description": "The default icon used to collapse the item.",
"class": null
},
{
"name": "expandIcon",
- "description": "The default icon used to expand the node.",
+ "description": "The default icon used to expand the item.",
"class": null
},
{
"name": "endIcon",
- "description": "The default icon displayed next to an end node.\nThis is applied to all tree nodes and can be overridden by the TreeItem `icon` slot prop.",
+ "description": "The default icon displayed next to an end item.\nThis is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.",
"class": null
}
],
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 82e77380feb4..e15c84a4b0ef 100644
--- a/docs/pages/x/api/tree-view/tree-item-2.json
+++ b/docs/pages/x/api/tree-view/tree-item-2.json
@@ -50,12 +50,12 @@
"default": "TreeItem2Label",
"class": "MuiTreeItem2-label"
},
- { "name": "collapseIcon", "description": "The icon used to collapse the node.", "class": null },
- { "name": "expandIcon", "description": "The icon used to expand the node.", "class": null },
- { "name": "endIcon", "description": "The icon displayed next to an end node.", "class": null },
+ { "name": "collapseIcon", "description": "The icon used to collapse the item.", "class": null },
+ { "name": "expandIcon", "description": "The icon used to expand the item.", "class": null },
+ { "name": "endIcon", "description": "The icon displayed next to an end item.", "class": null },
{
"name": "icon",
- "description": "The icon to display next to the tree node's label.",
+ "description": "The icon to display next to the tree item's label.",
"class": null
}
],
diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json
index e51cc365b7d3..58a3c04e4ff8 100644
--- a/docs/pages/x/api/tree-view/tree-item.json
+++ b/docs/pages/x/api/tree-view/tree-item.json
@@ -74,7 +74,7 @@
{
"key": "iconContainer",
"className": "MuiTreeItem-iconContainer",
- "description": "Styles applied to the tree node icon.",
+ "description": "Styles applied to the tree item icon.",
"isGlobal": false
},
{
diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json
index fae8965650e9..28823f6d6bf7 100644
--- a/docs/pages/x/api/tree-view/tree-view.json
+++ b/docs/pages/x/api/tree-view/tree-view.json
@@ -75,17 +75,17 @@
},
{
"name": "collapseIcon",
- "description": "The default icon used to collapse the node.",
+ "description": "The default icon used to collapse the item.",
"class": null
},
{
"name": "expandIcon",
- "description": "The default icon used to expand the node.",
+ "description": "The default icon used to expand the item.",
"class": null
},
{
"name": "endIcon",
- "description": "The default icon displayed next to an end node.\nThis is applied to all tree nodes and can be overridden by the TreeItem `icon` slot prop.",
+ "description": "The default icon displayed next to an end item.\nThis is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.",
"class": null
}
],
diff --git a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
index 14b108942357..4f113ec528dd 100644
--- a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
+++ b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
@@ -88,9 +88,9 @@
},
"classDescriptions": {},
"slotDescriptions": {
- "collapseIcon": "The default icon used to collapse the node.",
- "endIcon": "The default icon displayed next to an end node. This is applied to all tree nodes and can be overridden by the TreeItem icon
slot prop.",
- "expandIcon": "The default icon used to expand the node.",
+ "collapseIcon": "The default icon used to collapse the item.",
+ "endIcon": "The default icon displayed next to an end item. This is applied to all tree items and can be overridden by the TreeItem icon
slot prop.",
+ "expandIcon": "The default icon used to expand the item.",
"item": "Custom component for the item.",
"root": "Element rendered at the root."
}
diff --git a/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json b/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json
index 24f8592c31a0..4a7aca190f6e 100644
--- a/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json
+++ b/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json
@@ -74,9 +74,9 @@
},
"classDescriptions": {},
"slotDescriptions": {
- "collapseIcon": "The default icon used to collapse the node.",
- "endIcon": "The default icon displayed next to an end node. This is applied to all tree nodes and can be overridden by the TreeItem icon
slot prop.",
- "expandIcon": "The default icon used to expand the node.",
+ "collapseIcon": "The default icon used to collapse the item.",
+ "endIcon": "The default icon displayed next to an end item. This is applied to all tree items and can be overridden by the TreeItem icon
slot prop.",
+ "expandIcon": "The default icon used to expand the item.",
"root": "Element rendered at the root."
}
}
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 2278abc442be..43ff882ed936 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
@@ -36,12 +36,12 @@
}
},
"slotDescriptions": {
- "collapseIcon": "The icon used to collapse the node.",
+ "collapseIcon": "The icon used to collapse the item.",
"content": "The component that renders the content of the item. (e.g.: everything related to this item, not to its children).",
- "endIcon": "The icon displayed next to an end node.",
- "expandIcon": "The icon used to expand the node.",
+ "endIcon": "The icon displayed next to an end item.",
+ "expandIcon": "The icon used to expand the item.",
"groupTransition": "The component that renders the children of the item.",
- "icon": "The icon to display next to the tree node's label.",
+ "icon": "The icon to display next to the tree item's label.",
"iconContainer": "The component that renders the icon.",
"label": "The component that renders the item label.",
"root": "The component that renders the root."
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 e1cf3bc28949..edf4ebca118f 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
@@ -42,7 +42,7 @@
},
"iconContainer": {
"description": "Styles applied to {{nodeName}}.",
- "nodeName": "the tree node icon"
+ "nodeName": "the tree item icon"
},
"label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label element" },
"root": { "description": "Styles applied to the root element." },
diff --git a/docs/translations/api-docs/tree-view/tree-view/tree-view.json b/docs/translations/api-docs/tree-view/tree-view/tree-view.json
index c6d01a54bd44..d96dc4b910ff 100644
--- a/docs/translations/api-docs/tree-view/tree-view/tree-view.json
+++ b/docs/translations/api-docs/tree-view/tree-view/tree-view.json
@@ -74,9 +74,9 @@
},
"classDescriptions": {},
"slotDescriptions": {
- "collapseIcon": "The default icon used to collapse the node.",
- "endIcon": "The default icon displayed next to an end node. This is applied to all tree nodes and can be overridden by the TreeItem icon
slot prop.",
- "expandIcon": "The default icon used to expand the node.",
+ "collapseIcon": "The default icon used to collapse the item.",
+ "endIcon": "The default icon displayed next to an end item. This is applied to all tree items and can be overridden by the TreeItem icon
slot prop.",
+ "expandIcon": "The default icon used to expand the item.",
"root": "Element rendered at the root."
}
}
diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx
index 051e56a30c5d..f0d469068892 100644
--- a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx
+++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx
@@ -112,14 +112,14 @@ const RichTreeView = React.forwardRef(function RichTreeView<
ownerState: props as RichTreeViewProps,
});
- const nodesToRender = instance.getNodesToRender();
+ const itemsToRender = instance.getItemsToRender();
- const renderNode = ({
+ const renderItem = ({
label,
itemId,
id,
children,
- }: ReturnType[number]) => {
+ }: ReturnType[number]) => {
return (
- {children?.map(renderNode)}
+ {children?.map(renderItem)}
);
};
return (
- {nodesToRender.map(renderNode)}
+ {itemsToRender.map(renderItem)}
);
}) as TreeViewComponent;
diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.plugins.ts b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.plugins.ts
index b239a326ff95..7d2cabef636f 100644
--- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.plugins.ts
+++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.plugins.ts
@@ -4,12 +4,12 @@ import {
DefaultTreeViewPluginSlotProps,
DefaultTreeViewPluginSlots,
} from '../internals/plugins/defaultPlugins';
-import { useTreeViewJSXNodes } from '../internals/plugins/useTreeViewJSXNodes';
+import { useTreeViewJSXItems } from '../internals/plugins/useTreeViewJSXItems';
import { ConvertPluginsIntoSignatures } from '../internals/models';
export const SIMPLE_TREE_VIEW_PLUGINS = [
...DEFAULT_TREE_VIEW_PLUGINS,
- useTreeViewJSXNodes,
+ useTreeViewJSXItems,
] as const;
export type SimpleTreeViewPlugins = ConvertPluginsIntoSignatures;
diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx
index 92ee6764f4ed..4b1fe9226b92 100644
--- a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx
+++ b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx
@@ -12,11 +12,11 @@ import { describeConformance } from 'test/utils/describeConformance';
const TEST_TREE_VIEW_CONTEXT_VALUE: TreeViewContextValue = {
instance: {
- isNodeExpandable: () => false,
- isNodeExpanded: () => false,
- isNodeFocused: () => false,
- isNodeSelected: () => false,
- isNodeDisabled: (itemId: string | null): itemId is string => !!itemId,
+ isItemExpandable: () => false,
+ isItemExpanded: () => false,
+ isItemFocused: () => false,
+ isItemSelected: () => false,
+ isItemDisabled: (itemId: string | null): itemId is string => !!itemId,
getTreeItemId: () => '',
mapFirstCharFromJSX: () => () => {},
canItemBeTabbed: () => false,
@@ -43,18 +43,18 @@ describe('', () => {
describeConformance(, () => ({
classes,
inheritComponent: 'li',
- wrapMount: (mount) => (node: React.ReactNode) => {
+ wrapMount: (mount) => (item: React.ReactNode) => {
const wrapper = mount(
- {node}
+ {item}
,
);
return wrapper.childAt(0);
},
- render: (node) => {
+ render: (item) => {
return render(
- {node}
+ {item}
,
);
},
@@ -403,7 +403,7 @@ describe('', () => {
});
describe('when an item receives focus', () => {
- it('should focus the first node if none of the nodes are selected before the tree receives focus', () => {
+ it('should focus the first item if none of the items are selected before the tree receives focus', () => {
const { getByTestId, queryAllByRole } = render(
@@ -441,7 +441,7 @@ describe('', () => {
expect(getByTestId('two')).toHaveFocus();
});
- it('should work when focused node is removed', () => {
+ it('should work when focused item is removed', () => {
let removeActiveItem;
// a TreeItem which can remove from the tree by calling `removeActiveItem`
function ControlledTreeItem(props) {
@@ -480,7 +480,7 @@ describe('', () => {
describe('Navigation', () => {
describe('right arrow interaction', () => {
- it('should open the node and not move the focus if focus is on a closed node', () => {
+ it('should open the item and not move the focus if focus is on a closed item', () => {
const { getByTestId } = render(
@@ -500,7 +500,7 @@ describe('', () => {
expect(getByTestId('one')).toHaveFocus();
});
- it('should move focus to the first child if focus is on an open node', () => {
+ it('should move focus to the first child if focus is on an open item', () => {
const { getByTestId } = render(
@@ -562,7 +562,7 @@ describe('', () => {
expect(getByTestId('one')).toHaveFocus();
});
- it("should move focus to the item's parent item if focus is on a child node that is an end item", () => {
+ it("should move focus to the item's parent item if focus is on a child item that is an end item", () => {
const { getByTestId } = render(
@@ -584,7 +584,7 @@ describe('', () => {
expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
});
- it("should move focus to the node's parent node if focus is on a child node that is closed", () => {
+ it("should move focus to the item's parent item if focus is on a child item that is closed", () => {
const { getByTestId } = render(
@@ -609,7 +609,7 @@ describe('', () => {
expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
});
- it('should do nothing if focus is on a root node that is closed', () => {
+ it('should do nothing if focus is on a root item that is closed', () => {
const { getByTestId } = render(
@@ -627,7 +627,7 @@ describe('', () => {
expect(getByTestId('one')).toHaveFocus();
});
- it('should do nothing if focus is on a root node that is an end node', () => {
+ it('should do nothing if focus is on a root item that is an end item', () => {
const { getByTestId } = render(
@@ -644,7 +644,7 @@ describe('', () => {
});
describe('down arrow interaction', () => {
- it('moves focus to a sibling node', () => {
+ it('moves focus to a sibling item', () => {
const { getByTestId } = render(
@@ -745,7 +745,7 @@ describe('', () => {
});
describe('up arrow interaction', () => {
- it('moves focus to a sibling node', () => {
+ it('moves focus to a sibling item', () => {
const { getByTestId } = render(
@@ -811,7 +811,7 @@ describe('', () => {
});
describe('home key interaction', () => {
- it('moves focus to the first node in the tree', () => {
+ it('moves focus to the first item in the tree', () => {
const { getByTestId } = render(
@@ -834,7 +834,7 @@ describe('', () => {
});
describe('end key interaction', () => {
- it('moves focus to the last node in the tree without expanded items', () => {
+ it('moves focus to the last item in the tree without expanded items', () => {
const { getByTestId } = render(
@@ -855,7 +855,7 @@ describe('', () => {
expect(getByTestId('four')).toHaveFocus();
});
- it('moves focus to the last node in the tree with expanded items', () => {
+ it('moves focus to the last item in the tree with expanded items', () => {
const { getByTestId } = render(
@@ -882,7 +882,7 @@ describe('', () => {
});
describe('type-ahead functionality', () => {
- it('moves focus to the next node with a name that starts with the typed character', () => {
+ it('moves focus to the next item with a name that starts with the typed character', () => {
const { getByTestId } = render(
@@ -911,7 +911,7 @@ describe('', () => {
expect(getByTestId('one')).toHaveFocus();
});
- it('moves focus to the next node with the same starting character', () => {
+ it('moves focus to the next item with the same starting character', () => {
const { getByTestId } = render(
@@ -1048,7 +1048,7 @@ describe('', () => {
describe('Expansion', () => {
describe('enter key interaction', () => {
- it('expands a node with children', () => {
+ it('expands an item with children', () => {
const { getByTestId } = render(
@@ -1068,7 +1068,7 @@ describe('', () => {
expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
});
- it('collapses a node with children', () => {
+ it('collapses an item with children', () => {
const { getByTestId } = render(
@@ -1094,7 +1094,7 @@ describe('', () => {
describe('Single Selection', () => {
describe('keyboard', () => {
- it('should select a node when space is pressed', () => {
+ it('should select an item when space is pressed', () => {
const { getByTestId } = render(
@@ -1112,7 +1112,7 @@ describe('', () => {
expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
});
- it('should not deselect a node when space is pressed on a selected node', () => {
+ it('should not deselect an item when space is pressed on a selected item', () => {
const { getByTestId } = render(
@@ -1131,7 +1131,7 @@ describe('', () => {
expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
});
- it('should not select a node when space is pressed and disableSelection', () => {
+ it('should not select an node when space is pressed and disableSelection', () => {
const { getByTestId } = render(
@@ -1146,7 +1146,7 @@ describe('', () => {
expect(getByTestId('one')).not.to.have.attribute('aria-selected');
});
- it('should select a node when Enter is pressed and the node is not selected', () => {
+ it('should select an item when Enter is pressed and the item is not selected', () => {
const { getByTestId } = render(
@@ -1161,7 +1161,7 @@ describe('', () => {
expect(getByTestId('one')).to.have.attribute('aria-selected');
});
- it('should not un-select a node when Enter is pressed and the node is selected', () => {
+ it('should not un-select an item when Enter is pressed and the item is selected', () => {
const { getByTestId } = render(
@@ -1178,7 +1178,7 @@ describe('', () => {
});
describe('mouse', () => {
- it('should select a node when click', () => {
+ it('should select an item when click', () => {
const { getByText, getByTestId } = render(
@@ -1190,7 +1190,7 @@ describe('', () => {
expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
});
- it('should not deselect a node when clicking a selected node', () => {
+ it('should not deselect an item when clicking a selected item', () => {
const { getByText, getByTestId } = render(
@@ -1202,7 +1202,7 @@ describe('', () => {
expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
});
- it('should not select a node when click and disableSelection', () => {
+ it('should not select an item when click and disableSelection', () => {
const { getByText, getByTestId } = render(
@@ -1217,8 +1217,8 @@ describe('', () => {
describe('Multi Selection', () => {
describe('deselection', () => {
- describe('mouse behavior when multiple nodes are selected', () => {
- it('clicking a selected node holding ctrl should deselect the node', () => {
+ describe('mouse behavior when multiple items are selected', () => {
+ it('clicking a selected item holding ctrl should deselect the item', () => {
const { getByText, getByTestId } = render(
@@ -1233,7 +1233,7 @@ describe('', () => {
expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
});
- it('clicking a selected node holding meta should deselect the node', () => {
+ it('clicking a selected item holding meta should deselect the item', () => {
const { getByText, getByTestId } = render(
@@ -1249,8 +1249,8 @@ describe('', () => {
});
});
- describe('mouse behavior when one node is selected', () => {
- it('clicking a selected node shout not deselect the node', () => {
+ describe('mouse behavior when one item is selected', () => {
+ it('clicking a selected item shout not deselect the item', () => {
const { getByText, getByTestId } = render(
@@ -1798,7 +1798,7 @@ describe('', () => {
expect(getByTestId('one')).not.to.have.attribute('aria-selected');
});
- it('should prevent node triggering start of range selection', () => {
+ it('should prevent item triggering start of range selection', () => {
const { getByText, getByTestId } = render(
@@ -1816,7 +1816,7 @@ describe('', () => {
expect(getByTestId('four')).to.have.attribute('aria-selected', 'false');
});
- it('should prevent node being selected as part of range selection', () => {
+ it('should prevent item being selected as part of range selection', () => {
const { getByText, getByTestId } = render(
@@ -1834,7 +1834,7 @@ describe('', () => {
expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
});
- it('should prevent node triggering end of range selection', () => {
+ it('should prevent item triggering end of range selection', () => {
const { getByText, getByTestId } = render(
@@ -1870,7 +1870,7 @@ describe('', () => {
expect(getByTestId('one')).not.to.have.attribute('aria-selected');
});
- it('should not prevent next node being range selected by keyboard', () => {
+ it('should not prevent next item being range selected by keyboard', () => {
const { getByTestId } = render(
@@ -1910,7 +1910,7 @@ describe('', () => {
});
describe('`disabledItemsFocusable={false}`', () => {
- it('should select the next non disabled node by keyboard + arrow down', () => {
+ it('should select the next non disabled item by keyboard + arrow down', () => {
const { getByTestId } = render(
diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx
index bfa635fd4f3c..7dd7ba75dcf9 100644
--- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx
+++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx
@@ -201,10 +201,10 @@ export const TreeItem = React.forwardRef(function TreeItem(
return Boolean(reactChildren);
};
const expandable = isExpandable(children);
- const expanded = instance.isNodeExpanded(itemId);
- const focused = instance.isNodeFocused(itemId);
- const selected = instance.isNodeSelected(itemId);
- const disabled = instance.isNodeDisabled(itemId);
+ const expanded = instance.isItemExpanded(itemId);
+ const focused = instance.isItemFocused(itemId);
+ const selected = instance.isItemSelected(itemId);
+ const disabled = instance.isItemDisabled(itemId);
const ownerState: TreeItemOwnerState = {
...props,
diff --git a/packages/x-tree-view/src/TreeItem/treeItemClasses.ts b/packages/x-tree-view/src/TreeItem/treeItemClasses.ts
index bbbd77f44ccb..b5cab9b9719d 100644
--- a/packages/x-tree-view/src/TreeItem/treeItemClasses.ts
+++ b/packages/x-tree-view/src/TreeItem/treeItemClasses.ts
@@ -16,7 +16,7 @@ export interface TreeItemClasses {
focused: string;
/** State class applied to the element when disabled. */
disabled: string;
- /** Styles applied to the tree node icon. */
+ /** Styles applied to the tree item icon. */
iconContainer: string;
/** Styles applied to the label element. */
label: string;
diff --git a/packages/x-tree-view/src/TreeItem/useTreeItemState.ts b/packages/x-tree-view/src/TreeItem/useTreeItemState.ts
index 41085c010988..0c2442d3ec15 100644
--- a/packages/x-tree-view/src/TreeItem/useTreeItemState.ts
+++ b/packages/x-tree-view/src/TreeItem/useTreeItemState.ts
@@ -8,11 +8,11 @@ export function useTreeItemState(itemId: string) {
selection: { multiSelect },
} = useTreeViewContext();
- 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 expandable = instance.isItemExpandable(itemId);
+ const expanded = instance.isItemExpanded(itemId);
+ const focused = instance.isItemFocused(itemId);
+ const selected = instance.isItemSelected(itemId);
+ const disabled = instance.isItemDisabled(itemId);
const handleExpansion = (event: React.MouseEvent) => {
if (!disabled) {
@@ -23,8 +23,8 @@ export function useTreeItemState(itemId: string) {
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(itemId))) {
- instance.toggleNodeExpansion(event, itemId);
+ if (expandable && !(multiple && instance.isItemExpanded(itemId))) {
+ instance.toggleItemExpansion(event, itemId);
}
}
};
@@ -41,10 +41,10 @@ export function useTreeItemState(itemId: string) {
if (event.shiftKey) {
instance.selectRange(event, { end: itemId });
} else {
- instance.selectNode(event, itemId, true);
+ instance.selectItem(event, itemId, true);
}
} else {
- instance.selectNode(event, itemId);
+ instance.selectItem(event, itemId);
}
}
};
diff --git a/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts b/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts
index e3af78d0820d..eca8d8da6012 100644
--- a/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts
+++ b/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts
@@ -4,19 +4,19 @@ import { UseTreeItem2Status } from '../useTreeItem2';
export interface TreeItem2IconSlots {
/**
- * The icon used to collapse the node.
+ * The icon used to collapse the item.
*/
collapseIcon?: React.ElementType;
/**
- * The icon used to expand the node.
+ * The icon used to expand the item.
*/
expandIcon?: React.ElementType;
/**
- * The icon displayed next to an end node.
+ * The icon displayed next to an end item.
*/
endIcon?: React.ElementType;
/**
- * The icon to display next to the tree node's label.
+ * The icon to display next to the tree item's label.
*/
icon?: React.ElementType;
}
diff --git a/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx b/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx
index 020f82748e12..87ed49fff4dc 100644
--- a/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx
+++ b/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx
@@ -27,10 +27,10 @@ export const useTreeItem2Utils = ({
const status: UseTreeItem2Status = {
expandable: Boolean(Array.isArray(children) ? children.length : children),
- expanded: instance.isNodeExpanded(itemId),
- focused: instance.isNodeFocused(itemId),
- selected: instance.isNodeSelected(itemId),
- disabled: instance.isNodeDisabled(itemId),
+ expanded: instance.isItemExpanded(itemId),
+ focused: instance.isItemFocused(itemId),
+ selected: instance.isItemSelected(itemId),
+ disabled: instance.isItemDisabled(itemId),
};
const handleExpansion = (event: React.MouseEvent) => {
@@ -45,8 +45,8 @@ export const useTreeItem2Utils = ({
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(itemId))) {
- instance.toggleNodeExpansion(event, itemId);
+ if (status.expandable && !(multiple && instance.isItemExpanded(itemId))) {
+ instance.toggleItemExpansion(event, itemId);
}
};
@@ -65,10 +65,10 @@ export const useTreeItem2Utils = ({
if (event.shiftKey) {
instance.selectRange(event, { end: itemId });
} else {
- instance.selectNode(event, itemId, true);
+ instance.selectItem(event, itemId, true);
}
} else {
- instance.selectNode(event, itemId);
+ instance.selectItem(event, itemId);
}
};
diff --git a/packages/x-tree-view/src/internals/TreeViewProvider/DescendantProvider.tsx b/packages/x-tree-view/src/internals/TreeViewProvider/DescendantProvider.tsx
index f7cf84eb6670..7e145beaeac9 100644
--- a/packages/x-tree-view/src/internals/TreeViewProvider/DescendantProvider.tsx
+++ b/packages/x-tree-view/src/internals/TreeViewProvider/DescendantProvider.tsx
@@ -50,7 +50,7 @@ const noop = () => {};
* We use this for focus management, keyboard navigation, and typeahead
* functionality for some components.
*
- * The hook accepts the element node
+ * The hook accepts the element item
*
* Our main goals with this are:
* 1) maximum composability,
diff --git a/packages/x-tree-view/src/internals/index.ts b/packages/x-tree-view/src/internals/index.ts
index 9ae35c05e9d7..13f393a2a829 100644
--- a/packages/x-tree-view/src/internals/index.ts
+++ b/packages/x-tree-view/src/internals/index.ts
@@ -16,7 +16,7 @@ export type { UseTreeViewFocusSignature } from './plugins/useTreeViewFocus';
export type { UseTreeViewKeyboardNavigationSignature } from './plugins/useTreeViewKeyboardNavigation';
export type { UseTreeViewIdSignature } from './plugins/useTreeViewId';
export type { UseTreeViewIconsSignature } from './plugins/useTreeViewIcons';
-export type { UseTreeViewNodesSignature } from './plugins/useTreeViewNodes';
-export type { UseTreeViewJSXNodesSignature } from './plugins/useTreeViewJSXNodes';
+export type { UseTreeViewItemsSignature } from './plugins/useTreeViewItems';
+export type { UseTreeViewJSXItemsSignature } from './plugins/useTreeViewJSXItems';
export { extractPluginParamsFromProps } from './utils/extractPluginParamsFromProps';
diff --git a/packages/x-tree-view/src/internals/plugins/defaultPlugins.ts b/packages/x-tree-view/src/internals/plugins/defaultPlugins.ts
index c0c92e6bff0d..f737c5dcc8c9 100644
--- a/packages/x-tree-view/src/internals/plugins/defaultPlugins.ts
+++ b/packages/x-tree-view/src/internals/plugins/defaultPlugins.ts
@@ -1,5 +1,5 @@
import { useTreeViewId, UseTreeViewIdParameters } from './useTreeViewId';
-import { useTreeViewNodes, UseTreeViewNodesParameters } from './useTreeViewNodes';
+import { useTreeViewItems, UseTreeViewItemsParameters } from './useTreeViewItems';
import { useTreeViewExpansion, UseTreeViewExpansionParameters } from './useTreeViewExpansion';
import { useTreeViewSelection, UseTreeViewSelectionParameters } from './useTreeViewSelection';
import { useTreeViewFocus, UseTreeViewFocusParameters } from './useTreeViewFocus';
@@ -9,7 +9,7 @@ import { ConvertPluginsIntoSignatures, MergePluginsProperty } from '../models';
export const DEFAULT_TREE_VIEW_PLUGINS = [
useTreeViewId,
- useTreeViewNodes,
+ useTreeViewItems,
useTreeViewExpansion,
useTreeViewSelection,
useTreeViewFocus,
@@ -29,7 +29,7 @@ export type DefaultTreeViewPluginSlotProps = MergePluginsProperty<
// We can't infer this type from the plugin, otherwise we would lose the generics.
export interface DefaultTreeViewPluginParameters
extends UseTreeViewIdParameters,
- UseTreeViewNodesParameters,
+ UseTreeViewItemsParameters,
UseTreeViewExpansionParameters,
UseTreeViewFocusParameters,
UseTreeViewSelectionParameters,
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 c97d903ed116..7fa1d771b5a4 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.ts
@@ -14,7 +14,7 @@ export const useTreeViewExpansion: TreeViewPlugin
models.expandedItems.setControlledValue(value);
};
- const isNodeExpanded = React.useCallback(
+ const isItemExpanded = React.useCallback(
(itemId: string) => {
return Array.isArray(models.expandedItems.value)
? models.expandedItems.value.indexOf(itemId) !== -1
@@ -23,12 +23,12 @@ export const useTreeViewExpansion: TreeViewPlugin
[models.expandedItems.value],
);
- const isNodeExpandable = React.useCallback(
+ const isItemExpandable = React.useCallback(
(itemId: string) => !!instance.getNode(itemId)?.expandable,
[instance],
);
- const toggleNodeExpansion = useEventCallback(
+ const toggleItemExpansion = useEventCallback(
(event: React.SyntheticEvent, itemId: string | null) => {
if (itemId == null) {
return;
@@ -56,7 +56,7 @@ export const useTreeViewExpansion: TreeViewPlugin
const siblings = instance.getChildrenIds(node.parentId);
const diff = siblings.filter(
- (child) => instance.isNodeExpandable(child) && !instance.isNodeExpanded(child),
+ (child) => instance.isItemExpandable(child) && !instance.isItemExpanded(child),
);
const newExpanded = models.expandedItems.value.concat(diff);
@@ -73,9 +73,9 @@ export const useTreeViewExpansion: TreeViewPlugin
};
populateInstance(instance, {
- isNodeExpanded,
- isNodeExpandable,
- toggleNodeExpansion,
+ isItemExpanded,
+ isItemExpandable,
+ toggleItemExpansion,
expandAllSiblings,
});
};
@@ -86,11 +86,11 @@ useTreeViewExpansion.models = {
},
};
-const DEFAULT_EXPANDED_NODES: string[] = [];
+const DEFAULT_EXPANDED_ITEMS: string[] = [];
useTreeViewExpansion.getDefaultizedParams = (params) => ({
...params,
- defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_NODES,
+ defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_ITEMS,
});
useTreeViewExpansion.params = {
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 1a66b9dd86fd..9f261541492a 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
@@ -1,11 +1,11 @@
import * as React from 'react';
import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
export interface UseTreeViewExpansionInstance {
- isNodeExpanded: (itemId: string) => boolean;
- isNodeExpandable: (itemId: string) => boolean;
- toggleNodeExpansion: (event: React.SyntheticEvent, value: string) => void;
+ isItemExpanded: (itemId: string) => boolean;
+ isItemExpandable: (itemId: string) => boolean;
+ toggleItemExpansion: (event: React.SyntheticEvent, value: string) => void;
expandAllSiblings: (event: React.KeyboardEvent, itemId: string) => void;
}
@@ -50,5 +50,5 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
instance: UseTreeViewExpansionInstance;
modelNames: 'expandedItems';
- dependantPlugins: [UseTreeViewNodesSignature];
+ dependantPlugins: [UseTreeViewItemsSignature];
}>;
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 72c756902d67..eab87b06ba78 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts
@@ -14,7 +14,7 @@ const useTabbableItemId = (
) => {
const isItemVisible = (itemId: string) => {
const node = instance.getNode(itemId);
- return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+ return node && (node.parentId == null || instance.isItemExpanded(node.parentId));
};
let tabbableItemId: string | null | undefined;
@@ -43,9 +43,9 @@ export const useTreeViewFocus: TreeViewPlugin = ({
const tabbableItemId = useTabbableItemId(instance, models.selectedItems.value);
const setFocusedItemId = useEventCallback((itemId: React.SetStateAction) => {
- const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedNodeId) : itemId;
- if (state.focusedNodeId !== cleanItemId) {
- setState((prevState) => ({ ...prevState, focusedNodeId: cleanItemId }));
+ const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedItemId) : itemId;
+ if (state.focusedItemId !== cleanItemId) {
+ setState((prevState) => ({ ...prevState, focusedItemId: cleanItemId }));
}
});
@@ -56,14 +56,14 @@ export const useTreeViewFocus: TreeViewPlugin = ({
[rootRef],
);
- const isNodeFocused = React.useCallback(
- (itemId: string) => state.focusedNodeId === itemId && isTreeViewFocused(),
- [state.focusedNodeId, isTreeViewFocused],
+ const isItemFocused = React.useCallback(
+ (itemId: string) => state.focusedItemId === itemId && isTreeViewFocused(),
+ [state.focusedItemId, isTreeViewFocused],
);
- const isNodeVisible = (itemId: string) => {
+ const isItemVisible = (itemId: string) => {
const node = instance.getNode(itemId);
- return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+ return node && (node.parentId == null || instance.isItemExpanded(node.parentId));
};
const innerFocusItem = (event: React.SyntheticEvent | null, itemId: string) => {
@@ -79,37 +79,37 @@ export const useTreeViewFocus: TreeViewPlugin = ({
}
};
- const focusItem = useEventCallback((event: React.SyntheticEvent, nodeId: string) => {
- // If we receive a nodeId, and it is visible, the focus will be set to it
- if (isNodeVisible(nodeId)) {
- innerFocusItem(event, nodeId);
+ const focusItem = useEventCallback((event: React.SyntheticEvent, itemId: string) => {
+ // If we receive an itemId, and it is visible, the focus will be set to it
+ if (isItemVisible(itemId)) {
+ innerFocusItem(event, itemId);
}
});
- const focusDefaultNode = useEventCallback((event: React.SyntheticEvent | null) => {
- let nodeToFocusId: string | null | undefined;
+ const focusDefaultItem = useEventCallback((event: React.SyntheticEvent | null) => {
+ let itemToFocusId: string | null | undefined;
if (Array.isArray(models.selectedItems.value)) {
- nodeToFocusId = models.selectedItems.value.find(isNodeVisible);
- } else if (models.selectedItems.value != null && isNodeVisible(models.selectedItems.value)) {
- nodeToFocusId = models.selectedItems.value;
+ itemToFocusId = models.selectedItems.value.find(isItemVisible);
+ } else if (models.selectedItems.value != null && isItemVisible(models.selectedItems.value)) {
+ itemToFocusId = models.selectedItems.value;
}
- if (nodeToFocusId == null) {
- nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+ if (itemToFocusId == null) {
+ itemToFocusId = instance.getNavigableChildrenIds(null)[0];
}
- innerFocusItem(event, nodeToFocusId);
+ innerFocusItem(event, itemToFocusId);
});
const removeFocusedItem = useEventCallback(() => {
- if (state.focusedNodeId == null) {
+ if (state.focusedItemId == null) {
return;
}
- const node = instance.getNode(state.focusedNodeId);
+ const node = instance.getNode(state.focusedItemId);
if (node) {
const itemElement = document.getElementById(
- instance.getTreeItemId(state.focusedNodeId, node.idAttribute),
+ instance.getTreeItemId(state.focusedItemId, node.idAttribute),
);
if (itemElement) {
itemElement.blur();
@@ -122,10 +122,10 @@ export const useTreeViewFocus: TreeViewPlugin = ({
const canItemBeTabbed = (itemId: string) => itemId === tabbableItemId;
populateInstance(instance, {
- isNodeFocused,
+ isItemFocused,
canItemBeTabbed,
focusItem,
- focusDefaultNode,
+ focusDefaultItem,
removeFocusedItem,
});
@@ -133,9 +133,9 @@ export const useTreeViewFocus: TreeViewPlugin = ({
focusItem,
});
- useInstanceEventHandler(instance, 'removeNode', ({ id }) => {
- if (state.focusedNodeId === id) {
- instance.focusDefaultNode(null);
+ useInstanceEventHandler(instance, 'removeItem', ({ id }) => {
+ if (state.focusedItemId === id) {
+ instance.focusDefaultItem(null);
}
});
@@ -144,13 +144,13 @@ export const useTreeViewFocus: TreeViewPlugin = ({
otherHandlers.onFocus?.(event);
// if the event bubbled (which is React specific) we don't want to steal focus
if (event.target === event.currentTarget) {
- instance.focusDefaultNode(event);
+ instance.focusDefaultItem(event);
}
};
- const focusedNode = instance.getNode(state.focusedNodeId!);
- const activeDescendant = focusedNode
- ? instance.getTreeItemId(focusedNode.id, focusedNode.idAttribute)
+ const focusedItem = instance.getNode(state.focusedItemId!);
+ const activeDescendant = focusedItem
+ ? instance.getTreeItemId(focusedItem.id, focusedItem.idAttribute)
: null;
return {
@@ -161,7 +161,7 @@ export const useTreeViewFocus: TreeViewPlugin = ({
};
};
-useTreeViewFocus.getInitialState = () => ({ focusedNodeId: null });
+useTreeViewFocus.getInitialState = () => ({ focusedItemId: null });
useTreeViewFocus.params = {
onItemFocus: true,
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 2b9fe5f6f1e6..1a5e571f1317 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
@@ -1,15 +1,15 @@
import * as React from 'react';
import { TreeViewPluginSignature } from '../../models';
import { UseTreeViewIdSignature } from '../useTreeViewId/useTreeViewId.types';
-import type { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import type { UseTreeViewItemsSignature } from '../useTreeViewItems';
import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
export interface UseTreeViewFocusInstance {
- isNodeFocused: (itemId: string) => boolean;
+ isItemFocused: (itemId: string) => boolean;
canItemBeTabbed: (itemId: string) => boolean;
- focusItem: (event: React.SyntheticEvent, nodeId: string) => void;
- focusDefaultNode: (event: React.SyntheticEvent | null) => void;
+ focusItem: (event: React.SyntheticEvent, itemId: string) => void;
+ focusDefaultItem: (event: React.SyntheticEvent | null) => void;
removeFocusedItem: () => void;
}
@@ -28,7 +28,7 @@ export interface UseTreeViewFocusParameters {
export type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;
export interface UseTreeViewFocusState {
- focusedNodeId: string | null;
+ focusedItemId: string | null;
}
export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
@@ -39,7 +39,7 @@ export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
state: UseTreeViewFocusState;
dependantPlugins: [
UseTreeViewIdSignature,
- UseTreeViewNodesSignature,
+ UseTreeViewItemsSignature,
UseTreeViewSelectionSignature,
UseTreeViewExpansionSignature,
];
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts
index 8090beb113c3..0ceb50b8fe3e 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts
@@ -1,7 +1,7 @@
import * as React from 'react';
import { SlotComponentProps } from '@mui/base/utils';
import { TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
export interface UseTreeViewIconsParameters {}
@@ -10,16 +10,16 @@ export type UseTreeViewIconsDefaultizedParameters = UseTreeViewIconsParameters;
interface UseTreeViewIconsSlots {
/**
- * The default icon used to collapse the node.
+ * The default icon used to collapse the item.
*/
collapseIcon?: React.ElementType;
/**
- * The default icon used to expand the node.
+ * The default icon used to expand the item.
*/
expandIcon?: React.ElementType;
/**
- * The default icon displayed next to an end node.
- * This is applied to all tree nodes and can be overridden by the TreeItem `icon` slot prop.
+ * The default icon displayed next to an end item.
+ * This is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.
*/
endIcon?: React.ElementType;
}
@@ -43,5 +43,5 @@ export type UseTreeViewIconsSignature = TreeViewPluginSignature<{
contextValue: UseTreeViewIconsContextValue;
slots: UseTreeViewIconsSlots;
slotProps: UseTreeViewIconsSlotProps;
- dependantPlugins: [UseTreeViewNodesSignature, UseTreeViewSelectionSignature];
+ dependantPlugins: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
}>;
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 e7b84528bfe4..649405e2bb67 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
@@ -15,7 +15,7 @@ export interface UseTreeViewIdParameters {
export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
export interface UseTreeViewIdState {
- focusedNodeId: string | null;
+ focusedItemId: string | null;
}
export type UseTreeViewIdSignature = TreeViewPluginSignature<{
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/index.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/index.ts
new file mode 100644
index 000000000000..63c1a5d694ce
--- /dev/null
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/index.ts
@@ -0,0 +1,6 @@
+export { useTreeViewItems } from './useTreeViewItems';
+export type {
+ UseTreeViewItemsSignature,
+ UseTreeViewItemsParameters,
+ UseTreeViewItemsDefaultizedParameters,
+} from './useTreeViewItems.types';
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx
similarity index 98%
rename from packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.test.tsx
rename to packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx
index 28f3e2b1f398..e1f098e05799 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.test.tsx
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx
@@ -5,7 +5,7 @@ import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
-describe('useTreeViewNodes', () => {
+describe('useTreeViewItems', () => {
const { render } = createRenderer();
it('should throw an error when two items have the same ID (items prop approach)', function test() {
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.ts
similarity index 74%
rename from packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.ts
rename to packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.ts
index 01f133f5b9c6..045e6e849065 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.ts
@@ -2,25 +2,25 @@ import * as React from 'react';
import { TreeViewPlugin } from '../../models';
import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
import {
- UseTreeViewNodesSignature,
- UseTreeViewNodesDefaultizedParameters,
+ UseTreeViewItemsSignature,
+ UseTreeViewItemsDefaultizedParameters,
TreeViewNodeMap,
TreeViewItemIdAndChildren,
- UseTreeViewNodesState,
+ UseTreeViewItemsState,
TreeViewItemMap,
-} from './useTreeViewNodes.types';
+} from './useTreeViewItems.types';
import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
import { TreeViewBaseItem } from '../../../models';
-const updateNodesState = ({
+const updateItemsState = ({
items,
isItemDisabled,
getItemLabel,
getItemId,
}: Pick<
- UseTreeViewNodesDefaultizedParameters,
+ UseTreeViewItemsDefaultizedParameters,
'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'
->): UseTreeViewNodesState['nodes'] => {
+>): UseTreeViewItemsState['items'] => {
const nodeMap: TreeViewNodeMap = {};
const itemMap: TreeViewItemMap = {};
@@ -91,7 +91,7 @@ const updateNodesState = ({
};
};
-export const useTreeViewNodes: TreeViewPlugin = ({
+export const useTreeViewItems: TreeViewPlugin = ({
instance,
publicAPI,
params,
@@ -99,35 +99,35 @@ export const useTreeViewNodes: TreeViewPlugin = ({
setState,
}) => {
const getNode = React.useCallback(
- (itemId: string) => state.nodes.nodeMap[itemId],
- [state.nodes.nodeMap],
+ (itemId: string) => state.items.nodeMap[itemId],
+ [state.items.nodeMap],
);
const getItem = React.useCallback(
- (itemId: string) => state.nodes.itemMap[itemId],
- [state.nodes.itemMap],
+ (itemId: string) => state.items.itemMap[itemId],
+ [state.items.itemMap],
);
- const isNodeDisabled = React.useCallback(
+ const isItemDisabled = React.useCallback(
(itemId: string | null): itemId is string => {
if (itemId == null) {
return false;
}
- let item = instance.getNode(itemId);
+ let node = instance.getNode(itemId);
- // This can be called before the item has been added to the node map.
- if (!item) {
+ // This can be called before the item has been added to the item map.
+ if (!node) {
return false;
}
- if (item.disabled) {
+ if (node.disabled) {
return true;
}
- while (item.parentId != null) {
- item = instance.getNode(item.parentId);
- if (item.disabled) {
+ while (node.parentId != null) {
+ node = instance.getNode(node.parentId);
+ if (node.disabled) {
return true;
}
}
@@ -139,18 +139,18 @@ export const useTreeViewNodes: TreeViewPlugin = ({
const getChildrenIds = React.useCallback(
(itemId: string | null) =>
- Object.values(state.nodes.nodeMap)
+ Object.values(state.items.nodeMap)
.filter((item) => item.parentId === itemId)
.sort((a, b) => a.index - b.index)
.map((child) => child.id),
- [state.nodes.nodeMap],
+ [state.items.nodeMap],
);
const getNavigableChildrenIds = (itemId: string | null) => {
let childrenIds = instance.getChildrenIds(itemId);
if (!params.disabledItemsFocusable) {
- childrenIds = childrenIds.filter((item) => !instance.isNodeDisabled(item));
+ childrenIds = childrenIds.filter((item) => !instance.isItemDisabled(item));
}
return childrenIds;
};
@@ -168,20 +168,20 @@ export const useTreeViewNodes: TreeViewPlugin = ({
}
setState((prevState) => {
- const newState = updateNodesState({
+ const newState = updateItemsState({
items: params.items,
isItemDisabled: params.isItemDisabled,
getItemId: params.getItemId,
getItemLabel: params.getItemLabel,
});
- Object.values(prevState.nodes.nodeMap).forEach((node) => {
- if (!newState.nodeMap[node.id]) {
- publishTreeViewEvent(instance, 'removeNode', { id: node.id });
+ Object.values(prevState.items.nodeMap).forEach((item) => {
+ if (!newState.nodeMap[item.id]) {
+ publishTreeViewEvent(instance, 'removeItem', { id: item.id });
}
});
- return { ...prevState, nodes: newState };
+ return { ...prevState, items: newState };
});
}, [
instance,
@@ -192,35 +192,35 @@ export const useTreeViewNodes: TreeViewPlugin = ({
params.getItemLabel,
]);
- const getNodesToRender = () => {
+ const getItemsToRender = () => {
const getPropsFromItemId = ({
id,
children,
- }: TreeViewItemIdAndChildren): ReturnType[number] => {
- const node = state.nodes.nodeMap[id];
+ }: TreeViewItemIdAndChildren): ReturnType[number] => {
+ const item = state.items.nodeMap[id];
return {
- label: node.label!,
- itemId: node.id,
- id: node.idAttribute,
+ label: item.label!,
+ itemId: item.id,
+ id: item.idAttribute,
children: children?.map(getPropsFromItemId),
};
};
- return state.nodes.nodeTree.map(getPropsFromItemId);
+ return state.items.nodeTree.map(getPropsFromItemId);
};
- populateInstance(instance, {
+ populateInstance(instance, {
getNode,
getItem,
- getNodesToRender,
+ getItemsToRender,
getChildrenIds,
getNavigableChildrenIds,
- isNodeDisabled,
+ isItemDisabled,
preventItemUpdates,
areItemUpdatesPrevented,
});
- populatePublicAPI(publicAPI, {
+ populatePublicAPI(publicAPI, {
getItem,
});
@@ -229,8 +229,8 @@ export const useTreeViewNodes: TreeViewPlugin = ({
};
};
-useTreeViewNodes.getInitialState = (params) => ({
- nodes: updateNodesState({
+useTreeViewItems.getInitialState = (params) => ({
+ items: updateItemsState({
items: params.items,
isItemDisabled: params.isItemDisabled,
getItemId: params.getItemId,
@@ -238,12 +238,12 @@ useTreeViewNodes.getInitialState = (params) => ({
}),
});
-useTreeViewNodes.getDefaultizedParams = (params) => ({
+useTreeViewItems.getDefaultizedParams = (params) => ({
...params,
disabledItemsFocusable: params.disabledItemsFocusable ?? false,
});
-useTreeViewNodes.params = {
+useTreeViewItems.params = {
disabledItemsFocusable: true,
items: true,
isItemDisabled: true,
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts
similarity index 67%
rename from packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.ts
rename to packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts
index 352cf93605ff..37e704219cab 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts
@@ -1,20 +1,20 @@
import { TreeViewNode, DefaultizedProps, TreeViewPluginSignature } from '../../models';
import { TreeViewItemId } from '../../../models';
-interface TreeViewNodeProps {
+interface TreeViewItemProps {
label: string;
itemId: string;
id: string | undefined;
- children?: TreeViewNodeProps[];
+ children?: TreeViewItemProps[];
}
-export interface UseTreeViewNodesInstance {
+export interface UseTreeViewItemsInstance {
getNode: (itemId: string) => TreeViewNode;
getItem: (itemId: string) => R;
- getNodesToRender: () => TreeViewNodeProps[];
+ getItemsToRender: () => TreeViewItemProps[];
getChildrenIds: (itemId: string | null) => string[];
getNavigableChildrenIds: (itemId: string | null) => string[];
- isNodeDisabled: (itemId: string | null) => itemId is string;
+ isItemDisabled: (itemId: string | null) => itemId is string;
/**
* Freeze any future update to the state based on the `items` prop.
* This is useful when `useTreeViewJSXNodes` is used to avoid having conflicting sources of truth.
@@ -28,10 +28,10 @@ export interface UseTreeViewNodesInstance {
areItemUpdatesPrevented: () => boolean;
}
-export interface UseTreeViewNodesPublicAPI
- extends Pick, 'getItem'> {}
+export interface UseTreeViewItemsPublicAPI
+ extends Pick, 'getItem'> {}
-export interface UseTreeViewNodesParameters {
+export interface UseTreeViewItemsParameters {
/**
* If `true`, will allow focus on disabled items.
* @default false
@@ -65,13 +65,13 @@ export interface UseTreeViewNodesParameters {
getItemId?: (item: R) => TreeViewItemId;
}
-export type UseTreeViewNodesDefaultizedParameters = DefaultizedProps<
- UseTreeViewNodesParameters,
+export type UseTreeViewItemsDefaultizedParameters = DefaultizedProps<
+ UseTreeViewItemsParameters,
'disabledItemsFocusable'
>;
-interface UseTreeViewNodesEventLookup {
- removeNode: {
+interface UseTreeViewItemsEventLookup {
+ removeItem: {
params: { id: string };
};
}
@@ -81,25 +81,25 @@ export interface TreeViewItemIdAndChildren {
children?: TreeViewItemIdAndChildren[];
}
-export interface UseTreeViewNodesState {
- nodes: {
+export interface UseTreeViewItemsState {
+ items: {
nodeTree: TreeViewItemIdAndChildren[];
nodeMap: TreeViewNodeMap;
itemMap: TreeViewItemMap;
};
}
-interface UseTreeViewNodesContextValue
- extends Pick, 'disabledItemsFocusable'> {}
+interface UseTreeViewItemsContextValue
+ extends Pick, 'disabledItemsFocusable'> {}
-export type UseTreeViewNodesSignature = TreeViewPluginSignature<{
- params: UseTreeViewNodesParameters;
- defaultizedParams: UseTreeViewNodesDefaultizedParameters;
- instance: UseTreeViewNodesInstance;
- publicAPI: UseTreeViewNodesPublicAPI;
- events: UseTreeViewNodesEventLookup;
- state: UseTreeViewNodesState;
- contextValue: UseTreeViewNodesContextValue;
+export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
+ params: UseTreeViewItemsParameters;
+ defaultizedParams: UseTreeViewItemsDefaultizedParameters;
+ instance: UseTreeViewItemsInstance;
+ publicAPI: UseTreeViewItemsPublicAPI;
+ events: UseTreeViewItemsEventLookup;
+ state: UseTreeViewItemsState;
+ contextValue: UseTreeViewItemsContextValue;
}>;
export type TreeViewNodeMap = { [itemId: string]: TreeViewNode };
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/index.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/index.ts
new file mode 100644
index 000000000000..1eff39d296b7
--- /dev/null
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/index.ts
@@ -0,0 +1,6 @@
+export { useTreeViewJSXItems } from './useTreeViewJSXItems';
+export type {
+ UseTreeViewJSXItemsSignature,
+ UseTreeViewItemsParameters,
+ UseTreeViewItemsDefaultizedParameters,
+} from './useTreeViewJSXItems.types';
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx
similarity index 73%
rename from packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.tsx
rename to packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx
index 1ad50070711e..30101b6c9451 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.tsx
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx
@@ -3,7 +3,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
import useForkRef from '@mui/utils/useForkRef';
import { TreeViewItemPlugin, TreeViewNode, TreeViewPlugin } from '../../models';
import { populateInstance } from '../../useTreeView/useTreeView.utils';
-import { UseTreeViewJSXNodesSignature } from './useTreeViewJSXNodes.types';
+import { UseTreeViewJSXItemsSignature } from './useTreeViewJSXItems.types';
import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
import { useTreeViewContext } from '../../TreeViewProvider/useTreeViewContext';
import {
@@ -14,52 +14,52 @@ import {
import type { TreeItemProps } from '../../../TreeItem';
import type { TreeItem2Props } from '../../../TreeItem2';
-export const useTreeViewJSXNodes: TreeViewPlugin = ({
+export const useTreeViewJSXItems: TreeViewPlugin = ({
instance,
setState,
}) => {
instance.preventItemUpdates();
- const insertJSXNode = useEventCallback((node: TreeViewNode) => {
+ const insertJSXItem = useEventCallback((item: TreeViewNode) => {
setState((prevState) => {
- if (prevState.nodes.nodeMap[node.id] != null) {
+ if (prevState.items.nodeMap[item.id] != null) {
throw new Error(
[
'MUI X: The Tree View component requires all items to have a unique `id` property.',
'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.',
- `Tow items were provided with the same id in the \`items\` prop: "${node.id}"`,
+ `Tow items were provided with the same id in the \`items\` prop: "${item.id}"`,
].join('\n'),
);
}
return {
...prevState,
- nodes: {
- ...prevState.nodes,
- nodeMap: { ...prevState.nodes.nodeMap, [node.id]: node },
+ items: {
+ ...prevState.items,
+ nodeMap: { ...prevState.items.nodeMap, [item.id]: item },
// For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
- itemMap: { ...prevState.nodes.itemMap, [node.id]: { id: node.id, label: node.label } },
+ itemMap: { ...prevState.items.itemMap, [item.id]: { id: item.id, label: item.label } },
},
};
});
});
- const removeJSXNode = useEventCallback((itemId: string) => {
+ const removeJSXItem = useEventCallback((itemId: string) => {
setState((prevState) => {
- const newNodeMap = { ...prevState.nodes.nodeMap };
- const newItemMap = { ...prevState.nodes.itemMap };
+ const newNodeMap = { ...prevState.items.nodeMap };
+ const newItemMap = { ...prevState.items.itemMap };
delete newNodeMap[itemId];
delete newItemMap[itemId];
return {
...prevState,
- nodes: {
- ...prevState.nodes,
+ items: {
+ ...prevState.items,
nodeMap: newNodeMap,
itemMap: newItemMap,
},
};
});
- publishTreeViewEvent(instance, 'removeNode', { id: itemId });
+ publishTreeViewEvent(instance, 'removeItem', { id: itemId });
});
const mapFirstCharFromJSX = useEventCallback((itemId: string, firstChar: string) => {
@@ -77,21 +77,21 @@ export const useTreeViewJSXNodes: TreeViewPlugin =
};
});
- populateInstance(instance, {
- insertJSXNode,
- removeJSXNode,
+ populateInstance(instance, {
+ insertJSXItem,
+ removeJSXItem,
mapFirstCharFromJSX,
});
};
-const useTreeViewJSXNodesItemPlugin: TreeViewItemPlugin = ({
+const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin = ({
props,
rootRef,
contentRef,
}) => {
const { children, disabled = false, label, itemId, id } = props;
- const { instance } = useTreeViewContext<[UseTreeViewJSXNodesSignature]>();
+ const { instance } = useTreeViewContext<[UseTreeViewJSXItemsSignature]>();
const isExpandable = (reactChildren: React.ReactNode) => {
if (Array.isArray(reactChildren)) {
@@ -119,9 +119,9 @@ const useTreeViewJSXNodesItemPlugin: TreeViewItemPlugin {
- // On the first render a node's index will be -1. We want to wait for the real index.
+ // On the first render a item's index will be -1. We want to wait for the real index.
if (index !== -1) {
- instance.insertJSXNode({
+ instance.insertJSXItem({
id: itemId,
idAttribute: id,
index,
@@ -130,7 +130,7 @@ const useTreeViewJSXNodesItemPlugin: TreeViewItemPlugin instance.removeJSXNode(itemId);
+ return () => instance.removeJSXItem(itemId);
}
return undefined;
@@ -152,10 +152,10 @@ const useTreeViewJSXNodesItemPlugin: TreeViewItemPlugin (
+useTreeViewJSXItems.wrapItem = ({ children, itemId }) => (
{children}
);
-useTreeViewJSXNodes.params = {};
+useTreeViewJSXItems.params = {};
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.types.ts
new file mode 100644
index 000000000000..c219453ac6da
--- /dev/null
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.types.ts
@@ -0,0 +1,20 @@
+import { TreeViewNode, TreeViewPluginSignature } from '../../models';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
+import { UseTreeViewKeyboardNavigationSignature } from '../useTreeViewKeyboardNavigation';
+
+export interface UseTreeViewItemsInstance {
+ insertJSXItem: (item: TreeViewNode) => void;
+ removeJSXItem: (itemId: string) => void;
+ mapFirstCharFromJSX: (itemId: string, firstChar: string) => () => void;
+}
+
+export interface UseTreeViewItemsParameters {}
+
+export interface UseTreeViewItemsDefaultizedParameters {}
+
+export type UseTreeViewJSXItemsSignature = TreeViewPluginSignature<{
+ params: UseTreeViewItemsParameters;
+ defaultizedParams: UseTreeViewItemsDefaultizedParameters;
+ instance: UseTreeViewItemsInstance;
+ dependantPlugins: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];
+}>;
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/index.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/index.ts
deleted file mode 100644
index 2aeb78d6ca7a..000000000000
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { useTreeViewJSXNodes } from './useTreeViewJSXNodes';
-export type {
- UseTreeViewJSXNodesSignature,
- UseTreeViewNodesParameters,
- UseTreeViewNodesDefaultizedParameters,
-} from './useTreeViewJSXNodes.types';
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
deleted file mode 100644
index 7567e90b10c4..000000000000
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { TreeViewNode, TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
-import { UseTreeViewKeyboardNavigationSignature } from '../useTreeViewKeyboardNavigation';
-
-export interface UseTreeViewNodesInstance {
- insertJSXNode: (node: TreeViewNode) => void;
- removeJSXNode: (itemId: string) => void;
- mapFirstCharFromJSX: (itemId: string, firstChar: string) => () => void;
-}
-
-export interface UseTreeViewNodesParameters {}
-
-export interface UseTreeViewNodesDefaultizedParameters {}
-
-export type UseTreeViewJSXNodesSignature = TreeViewPluginSignature<{
- params: UseTreeViewNodesParameters;
- defaultizedParams: UseTreeViewNodesDefaultizedParameters;
- instance: UseTreeViewNodesInstance;
- dependantPlugins: [UseTreeViewNodesSignature, UseTreeViewKeyboardNavigationSignature];
-}>;
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 344cc4a5532b..42f487890461 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts
@@ -3,10 +3,10 @@ import { useTheme } from '@mui/material/styles';
import useEventCallback from '@mui/utils/useEventCallback';
import { TreeViewNode, TreeViewPlugin } from '../../models';
import {
- getFirstNode,
- getLastNode,
- getNextNode,
- getPreviousNode,
+ getFirstItem,
+ getLastItem,
+ getNextItem,
+ getPreviousItem,
populateInstance,
} from '../../useTreeView/useTreeView.utils';
import {
@@ -52,9 +52,9 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
newFirstCharMap[node.id] = node.label!.substring(0, 1).toLowerCase();
};
- Object.values(state.nodes.nodeMap).forEach(processItem);
+ Object.values(state.items.nodeMap).forEach(processItem);
firstCharMap.current = newFirstCharMap;
- }, [state.nodes.nodeMap, params.getItemId, instance]);
+ }, [state.items.nodeMap, params.getItemId, instance]);
const getFirstMatchingItem = (itemId: string, firstChar: string) => {
let start: number;
@@ -66,10 +66,10 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// This really only works since the ids are strings
Object.keys(firstCharMap.current).forEach((mapItemId) => {
const map = instance.getNode(mapItemId);
- const visible = map.parentId ? instance.isNodeExpanded(map.parentId) : true;
+ const visible = map.parentId ? instance.isItemExpanded(map.parentId) : true;
const shouldBeSkipped = params.disabledItemsFocusable
? false
- : instance.isNodeDisabled(mapItemId);
+ : instance.isItemDisabled(mapItemId);
if (visible && !shouldBeSkipped) {
firstCharIds.push(mapItemId);
@@ -100,10 +100,10 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
};
const canToggleItemSelection = (itemId: string) =>
- !params.disableSelection && !instance.isNodeDisabled(itemId);
+ !params.disableSelection && !instance.isItemDisabled(itemId);
const canToggleItemExpansion = (itemId: string) => {
- return !instance.isNodeDisabled(itemId) && instance.isNodeExpandable(itemId);
+ return !instance.isItemDisabled(itemId) && instance.isItemExpandable(itemId);
};
// ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
@@ -124,31 +124,31 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// eslint-disable-next-line default-case
switch (true) {
- // Select the node when pressing "Space"
+ // Select the item when pressing "Space"
case key === ' ' && canToggleItemSelection(itemId): {
event.preventDefault();
if (params.multiSelect && event.shiftKey) {
instance.selectRange(event, { end: itemId });
} else if (params.multiSelect) {
- instance.selectNode(event, itemId, true);
+ instance.selectItem(event, itemId, true);
} else {
- instance.selectNode(event, itemId);
+ instance.selectItem(event, itemId);
}
break;
}
- // If the focused node has children, we expand it.
- // If the focused node has no children, we select it.
+ // If the focused item has children, we expand it.
+ // If the focused item has no children, we select it.
case key === 'Enter': {
if (canToggleItemExpansion(itemId)) {
- instance.toggleNodeExpansion(event, itemId);
+ instance.toggleItemExpansion(event, itemId);
event.preventDefault();
} else if (canToggleItemSelection(itemId)) {
if (params.multiSelect) {
event.preventDefault();
- instance.selectNode(event, itemId, true);
- } else if (!instance.isNodeSelected(itemId)) {
- instance.selectNode(event, itemId);
+ instance.selectItem(event, itemId, true);
+ } else if (!instance.isItemSelected(itemId)) {
+ instance.selectItem(event, itemId);
event.preventDefault();
}
}
@@ -158,7 +158,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// Focus the next focusable item
case key === 'ArrowDown': {
- const nextItem = getNextNode(instance, itemId);
+ const nextItem = getNextItem(instance, itemId);
if (nextItem) {
event.preventDefault();
instance.focusItem(event, nextItem);
@@ -182,7 +182,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// Focuses the previous focusable item
case key === 'ArrowUp': {
- const previousItem = getPreviousNode(instance, itemId);
+ const previousItem = getPreviousItem(instance, itemId);
if (previousItem) {
event.preventDefault();
instance.focusItem(event, previousItem);
@@ -207,14 +207,14 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// 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(itemId)) {
- const nextNodeId = getNextNode(instance, itemId);
- if (nextNodeId) {
- instance.focusItem(event, nextNodeId);
+ if (instance.isItemExpanded(itemId)) {
+ const nextItemId = getNextItem(instance, itemId);
+ if (nextItemId) {
+ instance.focusItem(event, nextItemId);
event.preventDefault();
}
} else if (canToggleItemExpansion(itemId)) {
- instance.toggleNodeExpansion(event, itemId);
+ instance.toggleItemExpansion(event, itemId);
event.preventDefault();
}
@@ -224,8 +224,8 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// 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 (canToggleItemExpansion(itemId) && instance.isNodeExpanded(itemId)) {
- instance.toggleNodeExpansion(event, itemId);
+ if (canToggleItemExpansion(itemId) && instance.isItemExpanded(itemId)) {
+ instance.toggleItemExpansion(event, itemId);
event.preventDefault();
} else {
const parent = instance.getNode(itemId).parentId;
@@ -238,12 +238,12 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
break;
}
- // Focuses the first node in the tree
+ // Focuses the first item in the tree
case key === 'Home': {
- instance.focusItem(event, getFirstNode(instance));
+ instance.focusItem(event, getFirstItem(instance));
// Multi select behavior when pressing Ctrl + Shift + Home
- // Selects the focused node and all nodes up to the first node.
+ // Selects the focused item and all items up to the first item.
if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
instance.rangeSelectToFirst(event, itemId);
}
@@ -254,7 +254,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// Focuses the last item in the tree
case key === 'End': {
- instance.focusItem(event, getLastNode(instance));
+ instance.focusItem(event, getLastItem(instance));
// Multi select behavior when pressing Ctrl + Shirt + End
// Selects the focused item and all the items down to the last item.
@@ -274,11 +274,11 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
}
// Multi select behavior when pressing Ctrl + a
- // Selects all the nodes
+ // Selects all the items
case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection: {
instance.selectRange(event, {
- start: getFirstNode(instance),
- end: getLastNode(instance),
+ start: getFirstItem(instance),
+ end: getLastItem(instance),
});
event.preventDefault();
break;
@@ -287,9 +287,9 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// Type-ahead
// TODO: Support typing multiple characters
case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key): {
- const matchingNode = getFirstMatchingItem(itemId, key);
- if (matchingNode != null) {
- instance.focusItem(event, matchingNode);
+ const matchingItem = getFirstMatchingItem(itemId, key);
+ if (matchingItem != null) {
+ instance.focusItem(event, matchingItem);
event.preventDefault();
}
break;
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 729b8a875c47..053eeaaf43e6 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
@@ -1,6 +1,6 @@
import * as React from 'react';
import { TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
import { UseTreeViewFocusSignature } from '../useTreeViewFocus';
import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
@@ -17,7 +17,7 @@ export interface UseTreeViewKeyboardNavigationInstance {
export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
instance: UseTreeViewKeyboardNavigationInstance;
dependantPlugins: [
- UseTreeViewNodesSignature,
+ UseTreeViewItemsSignature,
UseTreeViewSelectionSignature,
UseTreeViewFocusSignature,
UseTreeViewExpansionSignature,
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/index.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/index.ts
deleted file mode 100644
index 35b6c06d11a6..000000000000
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { useTreeViewNodes } from './useTreeViewNodes';
-export type {
- UseTreeViewNodesSignature,
- UseTreeViewNodesParameters,
- UseTreeViewNodesDefaultizedParameters,
-} from './useTreeViewNodes.types';
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 c382816220cb..28a570228c6e 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts
@@ -2,9 +2,9 @@ import * as React from 'react';
import { TreeViewPlugin, TreeViewItemRange } from '../../models';
import {
populateInstance,
- getNextNode,
- getFirstNode,
- getLastNode,
+ getNextItem,
+ getFirstItem,
+ getLastItem,
} from '../../useTreeView/useTreeView.utils';
import { UseTreeViewSelectionSignature } from './useTreeViewSelection.types';
import { findOrderInTremauxTree } from './useTreeViewSelection.utils';
@@ -14,7 +14,7 @@ export const useTreeViewSelection: TreeViewPlugin
params,
models,
}) => {
- const lastSelectedNode = React.useRef(null);
+ const lastSelectedItem = React.useRef(null);
const lastSelectionWasRange = React.useRef(false);
const currentRangeSelection = React.useRef([]);
@@ -25,7 +25,7 @@ export const useTreeViewSelection: TreeViewPlugin
if (params.onItemSelectionToggle) {
if (params.multiSelect) {
const addedItems = (newSelectedItems as string[]).filter(
- (itemId) => !instance.isNodeSelected(itemId),
+ (itemId) => !instance.isItemSelected(itemId),
);
const removedItems = (models.selectedItems.value as string[]).filter(
(itemId) => !(newSelectedItems as string[]).includes(itemId),
@@ -55,12 +55,12 @@ export const useTreeViewSelection: TreeViewPlugin
models.selectedItems.setControlledValue(newSelectedItems);
};
- const isNodeSelected = (itemId: string) =>
+ const isItemSelected = (itemId: string) =>
Array.isArray(models.selectedItems.value)
? models.selectedItems.value.indexOf(itemId) !== -1
: models.selectedItems.value === itemId;
- const selectNode = (event: React.SyntheticEvent, itemId: string, multiple = false) => {
+ const selectItem = (event: React.SyntheticEvent, itemId: string, multiple = false) => {
if (params.disableSelection) {
return;
}
@@ -80,28 +80,28 @@ export const useTreeViewSelection: TreeViewPlugin
const newSelected = params.multiSelect ? [itemId] : itemId;
setSelectedItems(event, newSelected);
}
- lastSelectedNode.current = itemId;
+ lastSelectedItem.current = itemId;
lastSelectionWasRange.current = false;
currentRangeSelection.current = [];
};
- const getNodesInRange = (nodeAId: string, nodeBId: string) => {
- const [first, last] = findOrderInTremauxTree(instance, nodeAId, nodeBId);
- const nodes = [first];
+ const getItemsInRange = (itemAId: string, itemBId: string) => {
+ const [first, last] = findOrderInTremauxTree(instance, itemAId, itemBId);
+ const items = [first];
let current = first;
while (current !== last) {
- current = getNextNode(instance, current)!;
- nodes.push(current);
+ current = getNextItem(instance, current)!;
+ items.push(current);
}
- return nodes;
+ return items;
};
- const handleRangeArrowSelect = (event: React.SyntheticEvent, nodes: TreeViewItemRange) => {
+ const handleRangeArrowSelect = (event: React.SyntheticEvent, items: TreeViewItemRange) => {
let base = (models.selectedItems.value as string[]).slice();
- const { start, next, current } = nodes;
+ const { start, next, current } = items;
if (!next || !current) {
return;
@@ -130,29 +130,29 @@ export const useTreeViewSelection: TreeViewPlugin
const handleRangeSelect = (
event: React.SyntheticEvent,
- nodes: { start: string; end: string },
+ items: { start: string; end: string },
) => {
let base = (models.selectedItems.value as string[]).slice();
- const { start, end } = nodes;
- // If last selection was a range selection ignore nodes that were selected.
+ const { start, end } = items;
+ // If last selection was a range selection ignore items that were selected.
if (lastSelectionWasRange.current) {
base = base.filter((id) => currentRangeSelection.current.indexOf(id) === -1);
}
- let range = getNodesInRange(start, end);
- range = range.filter((node) => !instance.isNodeDisabled(node));
+ let range = getItemsInRange(start, end);
+ range = range.filter((item) => !instance.isItemDisabled(item));
currentRangeSelection.current = range;
let newSelected = base.concat(range);
newSelected = newSelected.filter((id, i) => newSelected.indexOf(id) === i);
setSelectedItems(event, newSelected);
};
- const selectRange = (event: React.SyntheticEvent, nodes: TreeViewItemRange, stacked = false) => {
+ const selectRange = (event: React.SyntheticEvent, items: TreeViewItemRange, stacked = false) => {
if (params.disableSelection) {
return;
}
- const { start = lastSelectedNode.current, end, current } = nodes;
+ const { start = lastSelectedItem.current, end, current } = items;
if (stacked) {
handleRangeArrowSelect(event, { start, next: end, current });
} else if (start != null && end != null) {
@@ -162,34 +162,34 @@ export const useTreeViewSelection: TreeViewPlugin
};
const rangeSelectToFirst = (event: React.KeyboardEvent, itemId: string) => {
- if (!lastSelectedNode.current) {
- lastSelectedNode.current = itemId;
+ if (!lastSelectedItem.current) {
+ lastSelectedItem.current = itemId;
}
- const start = lastSelectionWasRange.current ? lastSelectedNode.current : itemId;
+ const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
instance.selectRange(event, {
start,
- end: getFirstNode(instance),
+ end: getFirstItem(instance),
});
};
const rangeSelectToLast = (event: React.KeyboardEvent, itemId: string) => {
- if (!lastSelectedNode.current) {
- lastSelectedNode.current = itemId;
+ if (!lastSelectedItem.current) {
+ lastSelectedItem.current = itemId;
}
- const start = lastSelectionWasRange.current ? lastSelectedNode.current : itemId;
+ const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
instance.selectRange(event, {
start,
- end: getLastNode(instance),
+ end: getLastItem(instance),
});
};
populateInstance(instance, {
- isNodeSelected,
- selectNode,
+ isItemSelected,
+ selectItem,
selectRange,
rangeSelectToLast,
rangeSelectToFirst,
@@ -213,14 +213,14 @@ useTreeViewSelection.models = {
},
};
-const DEFAULT_SELECTED_NODES: string[] = [];
+const DEFAULT_SELECTED_ITEMS: string[] = [];
useTreeViewSelection.getDefaultizedParams = (params) => ({
...params,
disableSelection: params.disableSelection ?? false,
multiSelect: params.multiSelect ?? false,
defaultSelectedItems:
- params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_NODES : null),
+ params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null),
});
useTreeViewSelection.params = {
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 37d6324909ce..474a7b8f82e4 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
@@ -1,12 +1,12 @@
import * as React from 'react';
import type { DefaultizedProps, TreeViewItemRange, TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
export interface UseTreeViewSelectionInstance {
- isNodeSelected: (itemId: string) => boolean;
- selectNode: (event: React.SyntheticEvent, itemId: string, multiple?: boolean) => void;
- selectRange: (event: React.SyntheticEvent, nodes: TreeViewItemRange, stacked?: boolean) => void;
+ isItemSelected: (itemId: string) => boolean;
+ selectItem: (event: React.SyntheticEvent, itemId: string, multiple?: boolean) => void;
+ selectRange: (event: React.SyntheticEvent, items: TreeViewItemRange, stacked?: boolean) => void;
rangeSelectToFirst: (event: React.KeyboardEvent, itemId: string) => void;
rangeSelectToLast: (event: React.KeyboardEvent, itemId: string) => void;
}
@@ -76,8 +76,8 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
contextValue: UseTreeViewSelectionContextValue;
modelNames: 'selectedItems';
dependantPlugins: [
- UseTreeViewNodesSignature,
+ UseTreeViewItemsSignature,
UseTreeViewExpansionSignature,
- UseTreeViewNodesSignature,
+ UseTreeViewItemsSignature,
];
}>;
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.ts
index 7bfd556d6ba9..48553f5c6471 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.ts
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.ts
@@ -1,22 +1,22 @@
import { TreeViewInstance } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
/**
* This is used to determine the start and end of a selection range so
- * we can get the nodes between the two border nodes.
+ * we can get the items between the two border items.
*
- * It finds the nodes' common ancestor using
+ * It finds the items' common ancestor using
* a naive implementation of a lowest common ancestor algorithm
* (https://en.wikipedia.org/wiki/Lowest_common_ancestor).
- * Then compares the ancestor's 2 children that are ancestors of nodeA and NodeB
- * so we can compare their indexes to work out which node comes first in a depth first search.
+ * Then compares the ancestor's 2 children that are ancestors of itemA and ItemB
+ * so we can compare their indexes to work out which item comes first in a depth first search.
* (https://en.wikipedia.org/wiki/Depth-first_search)
*
- * Another way to put it is which node is shallower in a trémaux tree
+ * Another way to put it is which item is shallower in a trémaux tree
* https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
*/
export const findOrderInTremauxTree = (
- instance: TreeViewInstance<[UseTreeViewNodesSignature]>,
+ instance: TreeViewInstance<[UseTreeViewItemsSignature]>,
nodeAId: string,
nodeBId: string,
) => {
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 6e374cb568bb..8e8bffed2986 100644
--- a/packages/x-tree-view/src/internals/useTreeView/useTreeView.utils.ts
+++ b/packages/x-tree-view/src/internals/useTreeView/useTreeView.utils.ts
@@ -5,23 +5,23 @@ import {
TreeViewUsedPublicAPI,
} from '../models';
import type { UseTreeViewExpansionSignature } from '../plugins/useTreeViewExpansion';
-import type { UseTreeViewNodesSignature } from '../plugins/useTreeViewNodes';
+import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
-export const getPreviousNode = (
- instance: TreeViewInstance<[UseTreeViewNodesSignature, UseTreeViewExpansionSignature]>,
+export const getPreviousItem = (
+ instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>,
itemId: string,
) => {
- const item = instance.getNode(itemId);
- const siblings = instance.getNavigableChildrenIds(item.parentId);
+ const node = instance.getNode(itemId);
+ const siblings = instance.getNavigableChildrenIds(node.parentId);
const itemIndex = siblings.indexOf(itemId);
if (itemIndex === 0) {
- return item.parentId;
+ return node.parentId;
}
let currentItem: string = siblings[itemIndex - 1];
while (
- instance.isNodeExpanded(currentItem) &&
+ instance.isItemExpanded(currentItem) &&
instance.getNavigableChildrenIds(currentItem).length > 0
) {
currentItem = instance.getNavigableChildrenIds(currentItem).pop()!;
@@ -30,44 +30,44 @@ export const getPreviousNode = (
return currentItem;
};
-export const getNextNode = (
- instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>,
+export const getNextItem = (
+ instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>,
itemId: string,
) => {
// If expanded get first child
- if (instance.isNodeExpanded(itemId) && instance.getNavigableChildrenIds(itemId).length > 0) {
+ if (instance.isItemExpanded(itemId) && instance.getNavigableChildrenIds(itemId).length > 0) {
return instance.getNavigableChildrenIds(itemId)[0];
}
- let item = instance.getNode(itemId);
- while (item != null) {
+ let node = instance.getNode(itemId);
+ while (node != null) {
// Try to get next sibling
- const siblings = instance.getNavigableChildrenIds(item.parentId);
- const nextSibling = siblings[siblings.indexOf(item.id) + 1];
+ const siblings = instance.getNavigableChildrenIds(node.parentId);
+ const nextSibling = siblings[siblings.indexOf(node.id) + 1];
if (nextSibling) {
return nextSibling;
}
// If the sibling does not exist, go up a level to the parent and try again.
- item = instance.getNode(item.parentId!);
+ node = instance.getNode(node.parentId!);
}
return null;
};
-export const getLastNode = (
- instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>,
+export const getLastItem = (
+ instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>,
) => {
let lastItem = instance.getNavigableChildrenIds(null).pop()!;
- while (instance.isNodeExpanded(lastItem)) {
+ while (instance.isItemExpanded(lastItem)) {
lastItem = instance.getNavigableChildrenIds(lastItem).pop()!;
}
return lastItem;
};
-export const getFirstNode = (instance: TreeViewInstance<[UseTreeViewNodesSignature]>) =>
+export const getFirstItem = (instance: TreeViewInstance<[UseTreeViewItemsSignature]>) =>
instance.getNavigableChildrenIds(null)[0];
export const populateInstance = (