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

package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -11,11 +11,11 @@ export const useTreeViewExpansion = ({
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const isNodeExpanded = React.useCallback(nodeId => {
-    return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(nodeId) !== -1 : false;
+  const isItemExpanded = React.useCallback(itemId => {
+    return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(itemId) !== -1 : false;
   }, [models.expandedItems.value]);
-  const isNodeExpandable = React.useCallback(nodeId => !!instance.getNode(nodeId)?.expandable, [instance]);
-  const toggleNodeExpansion = useEventCallback((event, itemId) => {
+  const isItemExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
+  const toggleItemExpansion = useEventCallback((event, itemId) => {
     if (itemId == null) {
       return;
     }
@@ -31,24 +31,24 @@ export const useTreeViewExpansion = ({
     }
     setExpandedItems(event, newExpanded);
   });
-  const expandAllSiblings = (event, nodeId) => {
-    const node = instance.getNode(nodeId);
+  const expandAllSiblings = (event, itemId) => {
+    const node = instance.getNode(itemId);
     const siblings = instance.getChildrenIds(node.parentId);
-    const diff = siblings.filter(child => instance.isNodeExpandable(child) && !instance.isNodeExpanded(child));
+    const diff = siblings.filter(child => instance.isItemExpandable(child) && !instance.isItemExpanded(child));
     const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
       if (params.onItemExpansionToggle) {
-        diff.forEach(newlyExpandedNodeId => {
-          params.onItemExpansionToggle(event, newlyExpandedNodeId, true);
+        diff.forEach(newlyExpandedItemId => {
+          params.onItemExpansionToggle(event, newlyExpandedItemId, true);
         });
       }
       setExpandedItems(event, newExpanded);
     }
   };
   populateInstance(instance, {
-    isNodeExpanded,
-    isNodeExpandable,
-    toggleNodeExpansion,
+    isItemExpanded,
+    isItemExpandable,
+    toggleItemExpansion,
     expandAllSiblings
   });
 };
@@ -57,9 +57,9 @@ useTreeViewExpansion.models = {
     getDefaultValue: params => params.defaultExpandedItems
   }
 };
-const DEFAULT_EXPANDED_NODES = [];
+const DEFAULT_EXPANDED_ITEMS = [];
 useTreeViewExpansion.getDefaultizedParams = params => _extends({}, params, {
-  defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_NODES
+  defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_ITEMS
 });
 useTreeViewExpansion.params = {
   expandedItems: true,

package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -5,6 +5,22 @@ import ownerDocument from '@mui/utils/ownerDocument';
 import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
 import { getActiveElement } from '../../utils/utils';
+const useTabbableItemId = (instance, selectedItems) => {
+  const isItemVisible = itemId => {
+    const node = instance.getNode(itemId);
+    return node && (node.parentId == null || instance.isItemExpanded(node.parentId));
+  };
+  let tabbableItemId;
+  if (Array.isArray(selectedItems)) {
+    tabbableItemId = selectedItems.find(isItemVisible);
+  } else if (selectedItems != null && isItemVisible(selectedItems)) {
+    tabbableItemId = selectedItems;
+  }
+  if (tabbableItemId == null) {
+    tabbableItemId = instance.getNavigableChildrenIds(null)[0];
+  }
+  return tabbableItemId;
+};
 export const useTreeViewFocus = ({
   instance,
   publicAPI,
@@ -14,94 +30,99 @@ export const useTreeViewFocus = ({
   models,
   rootRef
 }) => {
-  const setFocusedNodeId = useEventCallback(nodeId => {
-    const cleanNodeId = typeof nodeId === 'function' ? nodeId(state.focusedNodeId) : nodeId;
-    if (state.focusedNodeId !== cleanNodeId) {
+  const tabbableItemId = useTabbableItemId(instance, models.selectedItems.value);
+  const setFocusedItemId = useEventCallback(itemId => {
+    const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedItemId) : itemId;
+    if (state.focusedItemId !== cleanItemId) {
       setState(prevState => _extends({}, prevState, {
-        focusedNodeId: cleanNodeId
+        focusedItemId: cleanItemId
       }));
     }
   });
-  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current === getActiveElement(ownerDocument(rootRef.current)), [rootRef]);
-  const isNodeFocused = React.useCallback(nodeId => state.focusedNodeId === nodeId && isTreeViewFocused(), [state.focusedNodeId, isTreeViewFocused]);
-  const isNodeVisible = nodeId => {
-    const node = instance.getNode(nodeId);
-    return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains(getActiveElement(ownerDocument(rootRef.current))), [rootRef]);
+  const isItemFocused = React.useCallback(itemId => state.focusedItemId === itemId && isTreeViewFocused(), [state.focusedItemId, isTreeViewFocused]);
+  const isItemVisible = itemId => {
+    const node = instance.getNode(itemId);
+    return node && (node.parentId == null || instance.isItemExpanded(node.parentId));
   };
-  const focusItem = useEventCallback((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.onItemFocus) {
-        params.onItemFocus(event, nodeId);
-      }
+  const innerFocusItem = (event, itemId) => {
+    const node = instance.getNode(itemId);
+    const itemElement = document.getElementById(instance.getTreeItemId(itemId, node.idAttribute));
+    if (itemElement) {
+      itemElement.focus();
+    }
+    setFocusedItemId(itemId);
+    if (params.onItemFocus) {
+      params.onItemFocus(event, itemId);
+    }
+  };
+  const focusItem = useEventCallback((event, itemId) => {
+    // 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 => {
-    let nodeToFocusId;
+  const focusDefaultItem = useEventCallback(event => {
+    let itemToFocusId;
     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];
-    }
-    setFocusedNodeId(nodeToFocusId);
-    if (params.onItemFocus) {
-      params.onItemFocus(event, nodeToFocusId);
+    if (itemToFocusId == null) {
+      itemToFocusId = instance.getNavigableChildrenIds(null)[0];
     }
+    innerFocusItem(event, itemToFocusId);
   });
-  const focusRoot = useEventCallback(() => {
-    rootRef.current?.focus({
-      preventScroll: true
-    });
+  const removeFocusedItem = useEventCallback(() => {
+    if (state.focusedItemId == null) {
+      return;
+    }
+    const node = instance.getNode(state.focusedItemId);
+    if (node) {
+      const itemElement = document.getElementById(instance.getTreeItemId(state.focusedItemId, node.idAttribute));
+      if (itemElement) {
+        itemElement.blur();
+      }
+    }
+    setFocusedItemId(null);
   });
+  const canItemBeTabbed = itemId => itemId === tabbableItemId;
   populateInstance(instance, {
-    isNodeFocused,
+    isItemFocused,
+    canItemBeTabbed,
     focusItem,
-    focusRoot,
-    focusDefaultNode
+    focusDefaultItem,
+    removeFocusedItem
   });
   populatePublicAPI(publicAPI, {
     focusItem
   });
-  useInstanceEventHandler(instance, 'removeNode', ({
+  useInstanceEventHandler(instance, 'removeItem', ({
     id
   }) => {
-    setFocusedNodeId(oldFocusedNodeId => {
-      if (oldFocusedNodeId === id && rootRef.current === ownerDocument(rootRef.current).activeElement) {
-        return instance.getChildrenIds(null)[0];
-      }
-      return oldFocusedNodeId;
-    });
+    if (state.focusedItemId === id) {
+      instance.focusDefaultItem(null);
+    }
   });
   const createHandleFocus = otherHandlers => event => {
     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 createHandleBlur = otherHandlers => event => {
-    otherHandlers.onBlur?.(event);
-    setFocusedNodeId(null);
-  };
-  const focusedNode = instance.getNode(state.focusedNodeId);
-  const activeDescendant = focusedNode ? instance.getTreeItemId(focusedNode.id, focusedNode.idAttribute) : null;
+  const focusedItem = instance.getNode(state.focusedItemId);
+  const activeDescendant = focusedItem ? instance.getTreeItemId(focusedItem.id, focusedItem.idAttribute) : null;
   return {
     getRootProps: otherHandlers => ({
       onFocus: createHandleFocus(otherHandlers),
-      onBlur: createHandleBlur(otherHandlers),
       'aria-activedescendant': activeDescendant ?? undefined
     })
   };
 };
 useTreeViewFocus.getInitialState = () => ({
-  focusedNodeId: null
+  focusedItemId: null
 });
 useTreeViewFocus.params = {
   onItemFocus: true

package/modern/internals/plugins/useTreeViewId/useTreeViewId.js

@@ -6,7 +6,7 @@ export const useTreeViewId = ({
   params
 }) => {
   const treeId = useId(params.id);
-  const getTreeItemId = React.useCallback((nodeId, idAttribute) => idAttribute ?? `${treeId}-${nodeId}`, [treeId]);
+  const getTreeItemId = React.useCallback((itemId, idAttribute) => idAttribute ?? `${treeId}-${itemId}`, [treeId]);
   populateInstance(instance, {
     getTreeItemId
   });

package/modern/internals/plugins/useTreeViewItems/index.js

@@ -0,0 +1 @@
+export { useTreeViewItems } from './useTreeViewItems';

package/{internals/plugins/useTreeViewNodes/useTreeViewNodes.js → modern/internals/plugins/useTreeViewItems/useTreeViewItems.js}

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
 import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
-const updateNodesState = ({
+const updateItemsState = ({
   items,
   isItemDisabled,
   getItemLabel,
@@ -12,7 +11,6 @@ const updateNodesState = ({
   const nodeMap = {};
   const itemMap = {};
   const processItem = (item, index, parentId) => {
-    var _item$children, _item$children2;
     const id = getItemId ? getItemId(item) : item.id;
     if (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.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
@@ -30,13 +28,13 @@ const updateNodesState = ({
       index,
       parentId,
       idAttribute: undefined,
-      expandable: !!((_item$children = item.children) != null && _item$children.length),
+      expandable: !!item.children?.length,
       disabled: isItemDisabled ? isItemDisabled(item) : false
     };
     itemMap[id] = item;
     return {
       id,
-      children: (_item$children2 = item.children) == null ? void 0 : _item$children2.map((child, childIndex) => processItem(child, childIndex, id))
+      children: item.children?.map((child, childIndex) => processItem(child, childIndex, id))
     };
   };
   const nodeTree = items.map((item, itemIndex) => processItem(item, itemIndex, null));
@@ -46,22 +44,22 @@ const updateNodesState = ({
     itemMap
   };
 };
-export const useTreeViewNodes = ({
+export const useTreeViewItems = ({
   instance,
   publicAPI,
   params,
   state,
   setState
 }) => {
-  const getNode = React.useCallback(nodeId => state.nodes.nodeMap[nodeId], [state.nodes.nodeMap]);
-  const getItem = React.useCallback(nodeId => state.nodes.itemMap[nodeId], [state.nodes.itemMap]);
-  const isNodeDisabled = React.useCallback(nodeId => {
-    if (nodeId == null) {
+  const getNode = React.useCallback(itemId => state.items.nodeMap[itemId], [state.items.nodeMap]);
+  const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
+  const isItemDisabled = React.useCallback(itemId => {
+    if (itemId == null) {
       return false;
     }
-    let node = instance.getNode(nodeId);
+    let node = instance.getNode(itemId);
 
-    // This can be called before the node has been added to the node map.
+    // This can be called before the item has been added to the item map.
     if (!node) {
       return false;
     }
@@ -76,56 +74,66 @@ export const useTreeViewNodes = ({
     }
     return false;
   }, [instance]);
-  const getChildrenIds = useEventCallback(nodeId => Object.values(state.nodes.nodeMap).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
-  const getNavigableChildrenIds = nodeId => {
-    let childrenIds = instance.getChildrenIds(nodeId);
+  const getChildrenIds = React.useCallback(itemId => Object.values(state.items.nodeMap).filter(item => item.parentId === itemId).sort((a, b) => a.index - b.index).map(child => child.id), [state.items.nodeMap]);
+  const getNavigableChildrenIds = itemId => {
+    let childrenIds = instance.getChildrenIds(itemId);
     if (!params.disabledItemsFocusable) {
-      childrenIds = childrenIds.filter(node => !instance.isNodeDisabled(node));
+      childrenIds = childrenIds.filter(item => !instance.isItemDisabled(item));
     }
     return childrenIds;
   };
+  const areItemUpdatesPreventedRef = React.useRef(false);
+  const preventItemUpdates = React.useCallback(() => {
+    areItemUpdatesPreventedRef.current = true;
+  }, []);
+  const areItemUpdatesPrevented = React.useCallback(() => areItemUpdatesPreventedRef.current, []);
   React.useEffect(() => {
+    if (instance.areItemUpdatesPrevented()) {
+      return;
+    }
     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 _extends({}, prevState, {
-        nodes: newState
+        items: newState
       });
     });
   }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
-  const getNodesToRender = () => {
-    const getPropsFromNodeId = ({
+  const getItemsToRender = () => {
+    const getPropsFromItemId = ({
       id,
       children
     }) => {
-      const node = state.nodes.nodeMap[id];
+      const item = state.items.nodeMap[id];
       return {
-        label: node.label,
-        nodeId: node.id,
-        id: node.idAttribute,
-        children: children == null ? void 0 : children.map(getPropsFromNodeId)
+        label: item.label,
+        itemId: item.id,
+        id: item.idAttribute,
+        children: children?.map(getPropsFromItemId)
       };
     };
-    return state.nodes.nodeTree.map(getPropsFromNodeId);
+    return state.items.nodeTree.map(getPropsFromItemId);
   };
   populateInstance(instance, {
     getNode,
     getItem,
-    getNodesToRender,
+    getItemsToRender,
     getChildrenIds,
     getNavigableChildrenIds,
-    isNodeDisabled
+    isItemDisabled,
+    preventItemUpdates,
+    areItemUpdatesPrevented
   });
   populatePublicAPI(publicAPI, {
     getItem
@@ -136,21 +144,18 @@ export const useTreeViewNodes = ({
     }
   };
 };
-useTreeViewNodes.getInitialState = params => ({
-  nodes: updateNodesState({
+useTreeViewItems.getInitialState = params => ({
+  items: updateItemsState({
     items: params.items,
     isItemDisabled: params.isItemDisabled,
     getItemId: params.getItemId,
     getItemLabel: params.getItemLabel
   })
 });
-useTreeViewNodes.getDefaultizedParams = params => {
-  var _params$disabledItems;
-  return _extends({}, params, {
-    disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
-  });
-};
-useTreeViewNodes.params = {
+useTreeViewItems.getDefaultizedParams = params => _extends({}, params, {
+  disabledItemsFocusable: params.disabledItemsFocusable ?? false
+});
+useTreeViewItems.params = {
   disabledItemsFocusable: true,
   items: true,
   isItemDisabled: true,

package/modern/internals/plugins/useTreeViewJSXItems/index.js

@@ -0,0 +1 @@
+export { useTreeViewJSXItems } from './useTreeViewJSXItems';

package/{internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js → modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js}

@@ -7,68 +7,69 @@ import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
 import { useTreeViewContext } from '../../TreeViewProvider/useTreeViewContext';
 import { DescendantProvider, useDescendant } from '../../TreeViewProvider/DescendantProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const useTreeViewJSXNodes = ({
+export const useTreeViewJSXItems = ({
   instance,
   setState
 }) => {
-  const insertJSXNode = useEventCallback(node => {
+  instance.preventItemUpdates();
+  const insertJSXItem = useEventCallback(item => {
     setState(prevState => {
-      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'));
+      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: "${item.id}"`].join('\n'));
       }
       return _extends({}, prevState, {
-        nodes: _extends({}, prevState.nodes, {
-          nodeMap: _extends({}, prevState.nodes.nodeMap, {
-            [node.id]: node
+        items: _extends({}, prevState.items, {
+          nodeMap: _extends({}, prevState.items.nodeMap, {
+            [item.id]: item
           }),
           // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
-          itemMap: _extends({}, prevState.nodes.itemMap, {
-            [node.id]: {
-              id: node.id,
-              label: node.label
+          itemMap: _extends({}, prevState.items.itemMap, {
+            [item.id]: {
+              id: item.id,
+              label: item.label
             }
           })
         })
       });
     });
   });
-  const removeJSXNode = useEventCallback(nodeId => {
+  const removeJSXItem = useEventCallback(itemId => {
     setState(prevState => {
-      const newNodeMap = _extends({}, prevState.nodes.nodeMap);
-      const newItemMap = _extends({}, prevState.nodes.itemMap);
-      delete newNodeMap[nodeId];
-      delete newItemMap[nodeId];
+      const newNodeMap = _extends({}, prevState.items.nodeMap);
+      const newItemMap = _extends({}, prevState.items.itemMap);
+      delete newNodeMap[itemId];
+      delete newItemMap[itemId];
       return _extends({}, prevState, {
-        nodes: _extends({}, prevState.nodes, {
+        items: _extends({}, prevState.items, {
           nodeMap: newNodeMap,
           itemMap: newItemMap
         })
       });
     });
-    publishTreeViewEvent(instance, 'removeNode', {
-      id: nodeId
+    publishTreeViewEvent(instance, 'removeItem', {
+      id: itemId
     });
   });
-  const mapFirstCharFromJSX = useEventCallback((nodeId, firstChar) => {
+  const mapFirstCharFromJSX = useEventCallback((itemId, firstChar) => {
     instance.updateFirstCharMap(firstCharMap => {
-      firstCharMap[nodeId] = firstChar;
+      firstCharMap[itemId] = firstChar;
       return firstCharMap;
     });
     return () => {
       instance.updateFirstCharMap(firstCharMap => {
         const newMap = _extends({}, firstCharMap);
-        delete newMap[nodeId];
+        delete newMap[itemId];
         return newMap;
       });
     };
   });
   populateInstance(instance, {
-    insertJSXNode,
-    removeJSXNode,
+    insertJSXItem,
+    removeJSXItem,
     mapFirstCharFromJSX
   });
 };
-const useTreeViewJSXNodesItemPlugin = ({
+const useTreeViewJSXItemsItemPlugin = ({
   props,
   rootRef,
   contentRef
@@ -77,7 +78,7 @@ const useTreeViewJSXNodesItemPlugin = ({
     children,
     disabled = false,
     label,
-    nodeId,
+    itemId,
     id
   } = props;
   const {
@@ -96,45 +97,44 @@ const useTreeViewJSXNodesItemPlugin = ({
   const handleContentRef = useForkRef(pluginContentRef, contentRef);
   const descendant = React.useMemo(() => ({
     element: treeItemElement,
-    id: nodeId
-  }), [nodeId, treeItemElement]);
+    id: itemId
+  }), [itemId, treeItemElement]);
   const {
     index,
     parentId
   } = useDescendant(descendant);
   React.useEffect(() => {
-    // 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({
-        id: nodeId,
+      instance.insertJSXItem({
+        id: itemId,
         idAttribute: id,
         index,
         parentId,
         expandable,
         disabled
       });
-      return () => instance.removeJSXNode(nodeId);
+      return () => instance.removeJSXItem(itemId);
     }
     return undefined;
-  }, [instance, parentId, index, nodeId, expandable, disabled, id]);
+  }, [instance, parentId, index, itemId, expandable, disabled, id]);
   React.useEffect(() => {
     if (label) {
-      var _pluginContentRef$cur, _pluginContentRef$cur2;
-      return instance.mapFirstCharFromJSX(nodeId, ((_pluginContentRef$cur = (_pluginContentRef$cur2 = pluginContentRef.current) == null ? void 0 : _pluginContentRef$cur2.textContent) != null ? _pluginContentRef$cur : '').substring(0, 1).toLowerCase());
+      return instance.mapFirstCharFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
     }
     return undefined;
-  }, [instance, nodeId, label]);
+  }, [instance, itemId, label]);
   return {
     contentRef: handleContentRef,
     rootRef: handleRootRef
   };
 };
-useTreeViewJSXNodes.itemPlugin = useTreeViewJSXNodesItemPlugin;
-useTreeViewJSXNodes.wrapItem = ({
+useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
+useTreeViewJSXItems.wrapItem = ({
   children,
-  nodeId
+  itemId
 }) => /*#__PURE__*/_jsx(DescendantProvider, {
-  id: nodeId,
+  id: itemId,
   children: children
 });
-useTreeViewJSXNodes.params = {};
+useTreeViewJSXItems.params = {};