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 = (