@mui/x-tree-view 7.0.0-beta.5 → 7.0.0-beta.7

package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeItem2Utils = void 0;
+var _useTreeViewContext = require("../../internals/TreeViewProvider/useTreeViewContext");
+const useTreeItem2Utils = ({
+  nodeId,
+  children
+}) => {
+  const {
+    instance,
+    selection: {
+      multiSelect
+    }
+  } = (0, _useTreeViewContext.useTreeViewContext)();
+  const status = {
+    expandable: Boolean(Array.isArray(children) ? children.length : children),
+    expanded: instance.isNodeExpanded(nodeId),
+    focused: instance.isNodeFocused(nodeId),
+    selected: instance.isNodeSelected(nodeId),
+    disabled: instance.isNodeDisabled(nodeId)
+  };
+  const handleExpansion = event => {
+    if (status.disabled) {
+      return;
+    }
+    if (!status.focused) {
+      instance.focusItem(event, nodeId);
+    }
+    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+
+    // If already expanded and trying to toggle selection don't close
+    if (status.expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
+      instance.toggleNodeExpansion(event, nodeId);
+    }
+  };
+  const handleSelection = event => {
+    if (status.disabled) {
+      return;
+    }
+    if (!status.focused) {
+      instance.focusItem(event, nodeId);
+    }
+    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    if (multiple) {
+      if (event.shiftKey) {
+        instance.selectRange(event, {
+          end: nodeId
+        });
+      } else {
+        instance.selectNode(event, nodeId, true);
+      }
+    } else {
+      instance.selectNode(event, nodeId);
+    }
+  };
+  const interactions = {
+    handleExpansion,
+    handleSelection
+  };
+  return {
+    interactions,
+    status
+  };
+};
+exports.useTreeItem2Utils = useTreeItem2Utils;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.0.0-beta.5
+ * @mui/x-tree-view v7.0.0-beta.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -19,18 +19,6 @@ Object.defineProperty(exports, "unstable_resetCleanupTracking", {
     return _useInstanceEventHandler.unstable_resetCleanupTracking;
   }
 });
-var _TreeItem = require("./TreeItem");
-Object.keys(_TreeItem).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TreeItem[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _TreeItem[key];
-    }
-  });
-});
 var _TreeView = require("./TreeView");
 Object.keys(_TreeView).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -67,6 +55,66 @@ Object.keys(_RichTreeView).forEach(function (key) {
     }
   });
 });
+var _TreeItem = require("./TreeItem");
+Object.keys(_TreeItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TreeItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeItem[key];
+    }
+  });
+});
+var _TreeItem2 = require("./TreeItem2");
+Object.keys(_TreeItem2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TreeItem2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeItem2[key];
+    }
+  });
+});
+var _useTreeItem = require("./useTreeItem2");
+Object.keys(_useTreeItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useTreeItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useTreeItem[key];
+    }
+  });
+});
+var _TreeItem2Icon = require("./TreeItem2Icon");
+Object.keys(_TreeItem2Icon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TreeItem2Icon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeItem2Icon[key];
+    }
+  });
+});
+var _TreeItem2Provider = require("./TreeItem2Provider");
+Object.keys(_TreeItem2Provider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TreeItem2Provider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeItem2Provider[key];
+    }
+  });
+});
 var _useInstanceEventHandler = require("./internals/hooks/useInstanceEventHandler");
 var _models = require("./models");
 Object.keys(_models).forEach(function (key) {

package/node/internals/hooks/useLazyRef.js

@@ -1,19 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLazyRef = useLazyRef;
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const UNINITIALIZED = {};
-
-// See https://github.com/facebook/react/issues/14490 for when to use this.
-function useLazyRef(init, initArg) {
-  const ref = React.useRef(UNINITIALIZED);
-  if (ref.current === UNINITIALIZED) {
-    ref.current = init(initArg);
+Object.defineProperty(exports, "useLazyRef", {
+  enumerable: true,
+  get: function () {
+    return _useLazyRef.default;
   }
-  return ref;
-}
+});
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));

package/node/internals/hooks/useOnMount.js

@@ -1,15 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useOnMount = useOnMount;
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const EMPTY = [];
-function useOnMount(fn) {
-  /* eslint-disable react-hooks/exhaustive-deps */
-  React.useEffect(fn, EMPTY);
-  /* eslint-enable react-hooks/exhaustive-deps */
-}
+Object.defineProperty(exports, "useOnMount", {
+  enumerable: true,
+  get: function () {
+    return _useOnMount.default;
+  }
+});
+var _useOnMount = _interopRequireDefault(require("@mui/utils/useOnMount"));

package/node/internals/hooks/useTimeout.js

@@ -1,43 +1,13 @@
 "use strict";
-'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Timeout = void 0;
-exports.useTimeout = useTimeout;
-var _useLazyRef = require("./useLazyRef");
-var _useOnMount = require("./useOnMount");
-class Timeout {
-  constructor() {
-    this.currentId = null;
-    this.clear = () => {
-      if (this.currentId !== null) {
-        clearTimeout(this.currentId);
-        this.currentId = null;
-      }
-    };
-    this.disposeEffect = () => {
-      return this.clear;
-    };
+Object.defineProperty(exports, "useTimeout", {
+  enumerable: true,
+  get: function () {
+    return _useTimeout.default;
   }
-  static create() {
-    return new Timeout();
-  }
-  /**
-   * Executes `fn` after `delay`, clearing any previously scheduled call.
-   */
-  start(delay, fn) {
-    this.clear();
-    this.currentId = setTimeout(() => {
-      this.currentId = null;
-      fn();
-    }, delay);
-  }
-}
-exports.Timeout = Timeout;
-function useTimeout() {
-  const timeout = (0, _useLazyRef.useLazyRef)(Timeout.create).current;
-  (0, _useOnMount.useOnMount)(timeout.disposeEffect);
-  return timeout;
-}
+});
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));

package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -16,42 +16,42 @@ const useTreeViewExpansion = ({
   params,
   models
 }) => {
-  const setExpandedNodes = (event, value) => {
-    params.onExpandedNodesChange?.(event, value);
-    models.expandedNodes.setControlledValue(value);
+  const setExpandedItems = (event, value) => {
+    params.onExpandedItemsChange?.(event, value);
+    models.expandedItems.setControlledValue(value);
   };
   const isNodeExpanded = React.useCallback(nodeId => {
-    return Array.isArray(models.expandedNodes.value) ? models.expandedNodes.value.indexOf(nodeId) !== -1 : false;
-  }, [models.expandedNodes.value]);
+    return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(nodeId) !== -1 : false;
+  }, [models.expandedItems.value]);
   const isNodeExpandable = React.useCallback(nodeId => !!instance.getNode(nodeId)?.expandable, [instance]);
-  const toggleNodeExpansion = (0, _useEventCallback.default)((event, nodeId) => {
-    if (nodeId == null) {
+  const toggleNodeExpansion = (0, _useEventCallback.default)((event, itemId) => {
+    if (itemId == null) {
       return;
     }
-    const isExpandedBefore = models.expandedNodes.value.indexOf(nodeId) !== -1;
+    const isExpandedBefore = models.expandedItems.value.indexOf(itemId) !== -1;
     let newExpanded;
     if (isExpandedBefore) {
-      newExpanded = models.expandedNodes.value.filter(id => id !== nodeId);
+      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
     } else {
-      newExpanded = [nodeId].concat(models.expandedNodes.value);
+      newExpanded = [itemId].concat(models.expandedItems.value);
     }
-    if (params.onNodeExpansionToggle) {
-      params.onNodeExpansionToggle(event, nodeId, !isExpandedBefore);
+    if (params.onItemExpansionToggle) {
+      params.onItemExpansionToggle(event, itemId, !isExpandedBefore);
     }
-    setExpandedNodes(event, newExpanded);
+    setExpandedItems(event, newExpanded);
   });
   const expandAllSiblings = (event, nodeId) => {
     const node = instance.getNode(nodeId);
     const siblings = instance.getChildrenIds(node.parentId);
     const diff = siblings.filter(child => instance.isNodeExpandable(child) && !instance.isNodeExpanded(child));
-    const newExpanded = models.expandedNodes.value.concat(diff);
+    const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
-      if (params.onNodeExpansionToggle) {
+      if (params.onItemExpansionToggle) {
         diff.forEach(newlyExpandedNodeId => {
-          params.onNodeExpansionToggle(event, newlyExpandedNodeId, true);
+          params.onItemExpansionToggle(event, newlyExpandedNodeId, true);
         });
       }
-      setExpandedNodes(event, newExpanded);
+      setExpandedItems(event, newExpanded);
     }
   };
   (0, _useTreeView.populateInstance)(instance, {
@@ -63,17 +63,17 @@ const useTreeViewExpansion = ({
 };
 exports.useTreeViewExpansion = useTreeViewExpansion;
 useTreeViewExpansion.models = {
-  expandedNodes: {
-    getDefaultValue: params => params.defaultExpandedNodes
+  expandedItems: {
+    getDefaultValue: params => params.defaultExpandedItems
   }
 };
 const DEFAULT_EXPANDED_NODES = [];
 useTreeViewExpansion.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
-  defaultExpandedNodes: params.defaultExpandedNodes ?? DEFAULT_EXPANDED_NODES
+  defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_NODES
 });
 useTreeViewExpansion.params = {
-  expandedNodes: true,
-  defaultExpandedNodes: true,
-  onExpandedNodesChange: true,
-  onNodeExpansionToggle: true
+  expandedItems: true,
+  defaultExpandedItems: true,
+  onExpandedItemsChange: true,
+  onItemExpansionToggle: true
 };

package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -37,31 +37,31 @@ const useTreeViewFocus = ({
     const node = instance.getNode(nodeId);
     return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
   };
-  const focusNode = (0, _useEventCallback.default)((event, nodeId) => {
+  const focusItem = (0, _useEventCallback.default)((event, nodeId) => {
     // if we receive a nodeId, and it is visible, the focus will be set to it
     if (nodeId && isNodeVisible(nodeId)) {
       if (!isTreeViewFocused()) {
         instance.focusRoot();
       }
       setFocusedNodeId(nodeId);
-      if (params.onNodeFocus) {
-        params.onNodeFocus(event, nodeId);
+      if (params.onItemFocus) {
+        params.onItemFocus(event, nodeId);
       }
     }
   });
   const focusDefaultNode = (0, _useEventCallback.default)(event => {
     let nodeToFocusId;
-    if (Array.isArray(models.selectedNodes.value)) {
-      nodeToFocusId = models.selectedNodes.value.find(isNodeVisible);
-    } else if (models.selectedNodes.value != null && isNodeVisible(models.selectedNodes.value)) {
-      nodeToFocusId = models.selectedNodes.value;
+    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;
     }
     if (nodeToFocusId == null) {
       nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
     }
     setFocusedNodeId(nodeToFocusId);
-    if (params.onNodeFocus) {
-      params.onNodeFocus(event, nodeToFocusId);
+    if (params.onItemFocus) {
+      params.onItemFocus(event, nodeToFocusId);
     }
   });
   const focusRoot = (0, _useEventCallback.default)(() => {
@@ -71,12 +71,12 @@ const useTreeViewFocus = ({
   });
   (0, _useTreeView.populateInstance)(instance, {
     isNodeFocused,
-    focusNode,
+    focusItem,
     focusRoot,
     focusDefaultNode
   });
   (0, _useTreeView.populatePublicAPI)(publicAPI, {
-    focusNode
+    focusItem
   });
   (0, _useInstanceEventHandler.useInstanceEventHandler)(instance, 'removeNode', ({
     id
@@ -114,5 +114,5 @@ useTreeViewFocus.getInitialState = () => ({
   focusedNodeId: null
 });
 useTreeViewFocus.params = {
-  onNodeFocus: true
+  onItemFocus: true
 };

package/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -22,22 +22,36 @@ const useTreeViewJSXNodes = ({
 }) => {
   const insertJSXNode = (0, _useEventCallback.default)(node => {
     setState(prevState => {
-      if (prevState.nodeMap[node.id] != null) {
+      if (prevState.nodes.nodeMap[node.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}"`].join('\n'));
       }
       return (0, _extends2.default)({}, prevState, {
-        nodeMap: (0, _extends2.default)({}, prevState.nodeMap, {
-          [node.id]: node
+        nodes: (0, _extends2.default)({}, prevState.nodes, {
+          nodeMap: (0, _extends2.default)({}, prevState.nodes.nodeMap, {
+            [node.id]: node
+          }),
+          // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
+          itemMap: (0, _extends2.default)({}, prevState.nodes.itemMap, {
+            [node.id]: {
+              id: node.id,
+              label: node.label
+            }
+          })
         })
       });
     });
   });
   const removeJSXNode = (0, _useEventCallback.default)(nodeId => {
     setState(prevState => {
-      const newMap = (0, _extends2.default)({}, prevState.nodeMap);
-      delete newMap[nodeId];
+      const newNodeMap = (0, _extends2.default)({}, prevState.nodes.nodeMap);
+      const newItemMap = (0, _extends2.default)({}, prevState.nodes.itemMap);
+      delete newNodeMap[nodeId];
+      delete newItemMap[nodeId];
       return (0, _extends2.default)({}, prevState, {
-        nodeMap: newMap
+        nodes: (0, _extends2.default)({}, prevState.nodes, {
+          nodeMap: newNodeMap,
+          itemMap: newItemMap
+        })
       });
     });
     (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeNode', {
@@ -66,15 +80,15 @@ const useTreeViewJSXNodes = ({
 exports.useTreeViewJSXNodes = useTreeViewJSXNodes;
 const useTreeViewJSXNodesItemPlugin = ({
   props,
-  ref
+  rootRef,
+  contentRef
 }) => {
   const {
     children,
     disabled = false,
     label,
     nodeId,
-    id,
-    ContentProps: inContentProps
+    id
   } = props;
   const {
     instance
@@ -87,8 +101,9 @@ const useTreeViewJSXNodesItemPlugin = ({
   };
   const expandable = isExpandable(children);
   const [treeItemElement, setTreeItemElement] = React.useState(null);
-  const contentRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(setTreeItemElement, ref);
+  const pluginContentRef = React.useRef(null);
+  const handleRootRef = (0, _useForkRef.default)(setTreeItemElement, rootRef);
+  const handleContentRef = (0, _useForkRef.default)(pluginContentRef, contentRef);
   const descendant = React.useMemo(() => ({
     element: treeItemElement,
     id: nodeId
@@ -114,22 +129,21 @@ const useTreeViewJSXNodesItemPlugin = ({
   }, [instance, parentId, index, nodeId, expandable, disabled, id]);
   React.useEffect(() => {
     if (label) {
-      return instance.mapFirstCharFromJSX(nodeId, (contentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
+      return instance.mapFirstCharFromJSX(nodeId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
     }
     return undefined;
   }, [instance, nodeId, label]);
   return {
-    props: (0, _extends2.default)({}, props, {
-      ContentProps: (0, _extends2.default)({}, inContentProps, {
-        ref: contentRef
-      })
-    }),
-    ref: handleRef,
-    wrapItem: item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DescendantProvider.DescendantProvider, {
-      id: nodeId,
-      children: item
-    })
+    contentRef: handleContentRef,
+    rootRef: handleRootRef
   };
 };
 useTreeViewJSXNodes.itemPlugin = useTreeViewJSXNodesItemPlugin;
+useTreeViewJSXNodes.wrapItem = ({
+  children,
+  nodeId
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DescendantProvider.DescendantProvider, {
+  id: nodeId,
+  children: children
+});
 useTreeViewJSXNodes.params = {};

package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -90,7 +90,9 @@ const useTreeViewKeyboardNavigation = ({
     return null;
   };
   const canToggleNodeSelection = nodeId => !params.disableSelection && !instance.isNodeDisabled(nodeId);
-  const canToggleNodeExpansion = nodeId => !instance.isNodeDisabled(nodeId) && instance.isNodeExpandable(nodeId);
+  const canToggleNodeExpansion = nodeId => {
+    return !instance.isNodeDisabled(nodeId) && instance.isNodeExpandable(nodeId);
+  };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
   const createHandleKeyDown = otherHandlers => event => {
@@ -99,7 +101,7 @@ const useTreeViewKeyboardNavigation = ({
       return;
     }
 
-    // If the tree is empty there will be no focused node
+    // If the tree is empty, there will be no focused node
     if (event.altKey || event.currentTarget !== event.target || state.focusedNodeId == null) {
       return;
     }
@@ -149,7 +151,7 @@ const useTreeViewKeyboardNavigation = ({
           const nextNode = (0, _useTreeView.getNextNode)(instance, state.focusedNodeId);
           if (nextNode) {
             event.preventDefault();
-            instance.focusNode(event, nextNode);
+            instance.focusItem(event, nextNode);
 
             // Multi select behavior when pressing Shift + ArrowDown
             // Toggles the selection state of the next node
@@ -169,7 +171,7 @@ const useTreeViewKeyboardNavigation = ({
           const previousNode = (0, _useTreeView.getPreviousNode)(instance, state.focusedNodeId);
           if (previousNode) {
             event.preventDefault();
-            instance.focusNode(event, previousNode);
+            instance.focusItem(event, previousNode);
 
             // Multi select behavior when pressing Shift + ArrowUp
             // Toggles the selection state of the previous node
@@ -188,7 +190,7 @@ const useTreeViewKeyboardNavigation = ({
       case key === 'ArrowRight' && !isRTL || key === 'ArrowLeft' && isRTL:
         {
           if (instance.isNodeExpanded(state.focusedNodeId)) {
-            instance.focusNode(event, (0, _useTreeView.getNextNode)(instance, state.focusedNodeId));
+            instance.focusItem(event, (0, _useTreeView.getNextNode)(instance, state.focusedNodeId));
             event.preventDefault();
           } else if (canToggleNodeExpansion(state.focusedNodeId)) {
             instance.toggleNodeExpansion(event, state.focusedNodeId);
@@ -207,7 +209,7 @@ const useTreeViewKeyboardNavigation = ({
           } else {
             const parent = instance.getNode(state.focusedNodeId).parentId;
             if (parent) {
-              instance.focusNode(event, parent);
+              instance.focusItem(event, parent);
               event.preventDefault();
             }
           }
@@ -217,7 +219,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focuses the first node in the tree
       case key === 'Home':
         {
-          instance.focusNode(event, (0, _useTreeView.getFirstNode)(instance));
+          instance.focusItem(event, (0, _useTreeView.getFirstNode)(instance));
 
           // Multi select behavior when pressing Ctrl + Shift + Home
           // Selects the focused node and all nodes up to the first node.
@@ -231,7 +233,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focuses the last node in the tree
       case key === 'End':
         {
-          instance.focusNode(event, (0, _useTreeView.getLastNode)(instance));
+          instance.focusItem(event, (0, _useTreeView.getLastNode)(instance));
 
           // Multi select behavior when pressing Ctrl + Shirt + End
           // Selects the focused node and all the nodes down to the last node.
@@ -268,7 +270,7 @@ const useTreeViewKeyboardNavigation = ({
         {
           const matchingNode = getFirstMatchingNode(state.focusedNodeId, key);
           if (matchingNode != null) {
-            instance.focusNode(event, matchingNode);
+            instance.focusItem(event, matchingNode);
             event.preventDefault();
           }
           break;