@mui/x-tree-view 7.0.0-beta.6 → 7.0.0

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -10,51 +10,51 @@ export const useTreeViewSelection = ({
   const lastSelectedNode = React.useRef(null);
   const lastSelectionWasRange = React.useRef(false);
   const currentRangeSelection = React.useRef([]);
-  const setSelectedNodes = (event, newSelectedNodes) => {
-    if (params.onNodeSelectionToggle) {
+  const setSelectedItems = (event, newSelectedItems) => {
+    if (params.onItemSelectionToggle) {
       if (params.multiSelect) {
-        const addedNodes = newSelectedNodes.filter(nodeId => !instance.isNodeSelected(nodeId));
-        const removedNodes = models.selectedNodes.value.filter(nodeId => !newSelectedNodes.includes(nodeId));
-        addedNodes.forEach(nodeId => {
-          params.onNodeSelectionToggle(event, nodeId, true);
+        const addedItems = newSelectedItems.filter(itemId => !instance.isNodeSelected(itemId));
+        const removedItems = models.selectedItems.value.filter(itemId => !newSelectedItems.includes(itemId));
+        addedItems.forEach(itemId => {
+          params.onItemSelectionToggle(event, itemId, true);
         });
-        removedNodes.forEach(nodeId => {
-          params.onNodeSelectionToggle(event, nodeId, false);
+        removedItems.forEach(itemId => {
+          params.onItemSelectionToggle(event, itemId, false);
         });
-      } else if (newSelectedNodes !== models.selectedNodes.value) {
-        if (models.selectedNodes.value != null) {
-          params.onNodeSelectionToggle(event, models.selectedNodes.value, false);
+      } else if (newSelectedItems !== models.selectedItems.value) {
+        if (models.selectedItems.value != null) {
+          params.onItemSelectionToggle(event, models.selectedItems.value, false);
         }
-        if (newSelectedNodes != null) {
-          params.onNodeSelectionToggle(event, newSelectedNodes, true);
+        if (newSelectedItems != null) {
+          params.onItemSelectionToggle(event, newSelectedItems, true);
         }
       }
     }
-    if (params.onSelectedNodesChange) {
-      params.onSelectedNodesChange(event, newSelectedNodes);
+    if (params.onSelectedItemsChange) {
+      params.onSelectedItemsChange(event, newSelectedItems);
     }
-    models.selectedNodes.setControlledValue(newSelectedNodes);
+    models.selectedItems.setControlledValue(newSelectedItems);
   };
-  const isNodeSelected = nodeId => Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
-  const selectNode = (event, nodeId, multiple = false) => {
+  const isNodeSelected = itemId => Array.isArray(models.selectedItems.value) ? models.selectedItems.value.indexOf(itemId) !== -1 : models.selectedItems.value === itemId;
+  const selectNode = (event, itemId, multiple = false) => {
     if (params.disableSelection) {
       return;
     }
     if (multiple) {
-      if (Array.isArray(models.selectedNodes.value)) {
+      if (Array.isArray(models.selectedItems.value)) {
         let newSelected;
-        if (models.selectedNodes.value.indexOf(nodeId) !== -1) {
-          newSelected = models.selectedNodes.value.filter(id => id !== nodeId);
+        if (models.selectedItems.value.indexOf(itemId) !== -1) {
+          newSelected = models.selectedItems.value.filter(id => id !== itemId);
         } else {
-          newSelected = [nodeId].concat(models.selectedNodes.value);
+          newSelected = [itemId].concat(models.selectedItems.value);
         }
-        setSelectedNodes(event, newSelected);
+        setSelectedItems(event, newSelected);
       }
     } else {
-      const newSelected = params.multiSelect ? [nodeId] : nodeId;
-      setSelectedNodes(event, newSelected);
+      const newSelected = params.multiSelect ? [itemId] : itemId;
+      setSelectedItems(event, newSelected);
     }
-    lastSelectedNode.current = nodeId;
+    lastSelectedNode.current = itemId;
     lastSelectionWasRange.current = false;
     currentRangeSelection.current = [];
   };
@@ -69,7 +69,7 @@ export const useTreeViewSelection = ({
     return nodes;
   };
   const handleRangeArrowSelect = (event, nodes) => {
-    let base = models.selectedNodes.value.slice();
+    let base = models.selectedItems.value.slice();
     const {
       start,
       next,
@@ -93,10 +93,10 @@ export const useTreeViewSelection = ({
       base.push(next);
       currentRangeSelection.current.push(current, next);
     }
-    setSelectedNodes(event, base);
+    setSelectedItems(event, base);
   };
   const handleRangeSelect = (event, nodes) => {
-    let base = models.selectedNodes.value.slice();
+    let base = models.selectedItems.value.slice();
     const {
       start,
       end
@@ -110,7 +110,7 @@ export const useTreeViewSelection = ({
     currentRangeSelection.current = range;
     let newSelected = base.concat(range);
     newSelected = newSelected.filter((id, i) => newSelected.indexOf(id) === i);
-    setSelectedNodes(event, newSelected);
+    setSelectedItems(event, newSelected);
   };
   const selectRange = (event, nodes, stacked = false) => {
     if (params.disableSelection) {
@@ -135,21 +135,21 @@ export const useTreeViewSelection = ({
     }
     lastSelectionWasRange.current = true;
   };
-  const rangeSelectToFirst = (event, nodeId) => {
+  const rangeSelectToFirst = (event, itemId) => {
     if (!lastSelectedNode.current) {
-      lastSelectedNode.current = nodeId;
+      lastSelectedNode.current = itemId;
     }
-    const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
+    const start = lastSelectionWasRange.current ? lastSelectedNode.current : itemId;
     instance.selectRange(event, {
       start,
       end: getFirstNode(instance)
     });
   };
-  const rangeSelectToLast = (event, nodeId) => {
+  const rangeSelectToLast = (event, itemId) => {
     if (!lastSelectedNode.current) {
-      lastSelectedNode.current = nodeId;
+      lastSelectedNode.current = itemId;
     }
-    const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
+    const start = lastSelectionWasRange.current ? lastSelectedNode.current : itemId;
     instance.selectRange(event, {
       start,
       end: getLastNode(instance)
@@ -174,24 +174,21 @@ export const useTreeViewSelection = ({
   };
 };
 useTreeViewSelection.models = {
-  selectedNodes: {
-    getDefaultValue: params => params.defaultSelectedNodes
+  selectedItems: {
+    getDefaultValue: params => params.defaultSelectedItems
   }
 };
 const DEFAULT_SELECTED_NODES = [];
-useTreeViewSelection.getDefaultizedParams = params => {
-  var _params$disableSelect, _params$multiSelect, _params$defaultSelect;
-  return _extends({}, params, {
-    disableSelection: (_params$disableSelect = params.disableSelection) != null ? _params$disableSelect : false,
-    multiSelect: (_params$multiSelect = params.multiSelect) != null ? _params$multiSelect : false,
-    defaultSelectedNodes: (_params$defaultSelect = params.defaultSelectedNodes) != null ? _params$defaultSelect : params.multiSelect ? DEFAULT_SELECTED_NODES : null
-  });
-};
+useTreeViewSelection.getDefaultizedParams = params => _extends({}, params, {
+  disableSelection: params.disableSelection ?? false,
+  multiSelect: params.multiSelect ?? false,
+  defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_NODES : null)
+});
 useTreeViewSelection.params = {
   disableSelection: true,
   multiSelect: true,
-  defaultSelectedNodes: true,
-  selectedNodes: true,
-  onSelectedNodesChange: true,
-  onNodeSelectionToggle: true
+  defaultSelectedItems: true,
+  selectedItems: true,
+  onSelectedItemsChange: true,
+  onItemSelectionToggle: true
 };

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts

@@ -3,11 +3,11 @@ import type { DefaultizedProps, TreeViewItemRange, TreeViewPluginSignature } fro
 import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 export interface UseTreeViewSelectionInstance {
-    isNodeSelected: (nodeId: string) => boolean;
-    selectNode: (event: React.SyntheticEvent, nodeId: string, multiple?: boolean) => void;
+    isNodeSelected: (itemId: string) => boolean;
+    selectNode: (event: React.SyntheticEvent, itemId: string, multiple?: boolean) => void;
     selectRange: (event: React.SyntheticEvent, nodes: TreeViewItemRange, stacked?: boolean) => void;
-    rangeSelectToFirst: (event: React.KeyboardEvent<HTMLUListElement>, nodeId: string) => void;
-    rangeSelectToLast: (event: React.KeyboardEvent<HTMLUListElement>, nodeId: string) => void;
+    rangeSelectToFirst: (event: React.KeyboardEvent, itemId: string) => void;
+    rangeSelectToLast: (event: React.KeyboardEvent, itemId: string) => void;
 }
 type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? string[] : string | null;
 export interface UseTreeViewSelectionParameters<Multiple extends boolean | undefined> {
@@ -17,16 +17,16 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
      */
     disableSelection?: boolean;
     /**
-     * Selected node ids. (Uncontrolled)
+     * Selected item ids. (Uncontrolled)
      * When `multiSelect` is true this takes an array of strings; when false (default) a string.
      * @default []
      */
-    defaultSelectedNodes?: TreeViewSelectionValue<Multiple>;
+    defaultSelectedItems?: TreeViewSelectionValue<Multiple>;
     /**
-     * Selected node ids. (Controlled)
+     * Selected item ids. (Controlled)
      * When `multiSelect` is true this takes an array of strings; when false (default) a string.
      */
-    selectedNodes?: TreeViewSelectionValue<Multiple>;
+    selectedItems?: TreeViewSelectionValue<Multiple>;
     /**
      * If true `ctrl` and `shift` will trigger multiselect.
      * @default false
@@ -35,19 +35,19 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
     /**
      * Callback fired when tree items are selected/deselected.
      * @param {React.SyntheticEvent} event The event source of the callback
-     * @param {string[] | string} nodeIds The ids of the selected nodes.
+     * @param {string[] | string} itemIds The ids of the selected items.
      * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
      */
-    onSelectedNodesChange?: (event: React.SyntheticEvent, nodeIds: TreeViewSelectionValue<Multiple>) => void;
+    onSelectedItemsChange?: (event: React.SyntheticEvent, itemIds: TreeViewSelectionValue<Multiple>) => void;
     /**
      * Callback fired when a tree item is selected or deselected.
      * @param {React.SyntheticEvent} event The event source of the callback.
-     * @param {array} nodeId The nodeId of the modified node.
-     * @param {array} isSelected `true` if the node has just been selected, `false` if it has just been deselected.
+     * @param {array} itemId The itemId of the modified item.
+     * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
      */
-    onNodeSelectionToggle?: (event: React.SyntheticEvent, nodeId: string, isSelected: boolean) => void;
+    onItemSelectionToggle?: (event: React.SyntheticEvent, itemId: string, isSelected: boolean) => void;
 }
-export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedNodes' | 'multiSelect'>;
+export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedItems' | 'multiSelect'>;
 interface UseTreeViewSelectionContextValue {
     selection: Pick<UseTreeViewSelectionDefaultizedParameters<boolean>, 'multiSelect'>;
 }
@@ -56,7 +56,7 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
     defaultizedParams: UseTreeViewSelectionDefaultizedParameters<any>;
     instance: UseTreeViewSelectionInstance;
     contextValue: UseTreeViewSelectionContextValue;
-    modelNames: 'selectedNodes';
+    modelNames: 'selectedItems';
     dependantPlugins: [
         UseTreeViewNodesSignature,
         UseTreeViewExpansionSignature,

package/internals/useTreeView/useTreeView.js

@@ -38,6 +38,7 @@ export const useTreeView = inParams => {
   });
   const rootPropsGetters = [];
   const contextValue = {
+    publicAPI,
     instance: instance
   };
   const runPlugin = plugin => {
@@ -60,47 +61,47 @@ export const useTreeView = inParams => {
     }
   };
   plugins.forEach(runPlugin);
-  contextValue.runItemPlugins = ({
-    props,
-    ref
-  }) => {
-    let finalProps = props;
-    let finalRef = ref;
-    const itemWrappers = [];
+  contextValue.runItemPlugins = itemPluginProps => {
+    let finalRootRef = null;
+    let finalContentRef = null;
     plugins.forEach(plugin => {
       if (!plugin.itemPlugin) {
         return;
       }
       const itemPluginResponse = plugin.itemPlugin({
-        props: finalProps,
-        ref: finalRef
+        props: itemPluginProps,
+        rootRef: finalRootRef,
+        contentRef: finalContentRef
       });
-      if (itemPluginResponse != null && itemPluginResponse.props) {
-        finalProps = itemPluginResponse.props;
-      }
-      if (itemPluginResponse != null && itemPluginResponse.ref) {
-        finalRef = itemPluginResponse.ref;
+      if (itemPluginResponse?.rootRef) {
+        finalRootRef = itemPluginResponse.rootRef;
       }
-      if (itemPluginResponse != null && itemPluginResponse.wrapItem) {
-        itemWrappers.push(itemPluginResponse.wrapItem);
+      if (itemPluginResponse?.contentRef) {
+        finalContentRef = itemPluginResponse.contentRef;
       }
     });
     return {
-      props: finalProps,
-      ref: finalRef,
-      wrapItem: children => {
-        let finalChildren = children;
-        itemWrappers.forEach(itemWrapper => {
-          finalChildren = itemWrapper(finalChildren);
-        });
-        return finalChildren;
-      }
+      contentRef: finalContentRef,
+      rootRef: finalRootRef
     };
   };
+  const itemWrappers = plugins.map(plugin => plugin.wrapItem).filter(wrapItem => !!wrapItem);
+  contextValue.wrapItem = ({
+    itemId,
+    children
+  }) => {
+    let finalChildren = children;
+    itemWrappers.forEach(itemWrapper => {
+      finalChildren = itemWrapper({
+        itemId,
+        children: finalChildren
+      });
+    });
+    return finalChildren;
+  };
   const getRootProps = (otherHandlers = {}) => {
     const rootProps = _extends({
-      role: 'tree',
-      tabIndex: 0
+      role: 'tree'
     }, otherHandlers, {
       ref: handleRootRef
     });

package/internals/useTreeView/useTreeView.utils.d.ts

@@ -1,8 +1,8 @@
 import { TreeViewAnyPluginSignature, TreeViewInstance, TreeViewUsedInstance, TreeViewUsedPublicAPI } from '../models';
 import type { UseTreeViewExpansionSignature } from '../plugins/useTreeViewExpansion';
 import type { UseTreeViewNodesSignature } from '../plugins/useTreeViewNodes';
-export declare const getPreviousNode: (instance: TreeViewInstance<[UseTreeViewNodesSignature, UseTreeViewExpansionSignature]>, nodeId: string) => string | null;
-export declare const getNextNode: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>, nodeId: string) => string | null;
+export declare const getPreviousNode: (instance: TreeViewInstance<[UseTreeViewNodesSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getNextNode: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>, itemId: string) => string | null;
 export declare const getLastNode: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>) => string;
 export declare const getFirstNode: (instance: TreeViewInstance<[UseTreeViewNodesSignature]>) => string;
 export declare const populateInstance: <T extends TreeViewAnyPluginSignature>(instance: TreeViewUsedInstance<T>, methods: T["instance"]) => void;

package/internals/useTreeView/useTreeView.utils.js

@@ -1,41 +1,41 @@
-export const getPreviousNode = (instance, nodeId) => {
-  const node = instance.getNode(nodeId);
-  const siblings = instance.getNavigableChildrenIds(node.parentId);
-  const nodeIndex = siblings.indexOf(nodeId);
-  if (nodeIndex === 0) {
-    return node.parentId;
+export const getPreviousNode = (instance, itemId) => {
+  const item = instance.getNode(itemId);
+  const siblings = instance.getNavigableChildrenIds(item.parentId);
+  const itemIndex = siblings.indexOf(itemId);
+  if (itemIndex === 0) {
+    return item.parentId;
   }
-  let currentNode = siblings[nodeIndex - 1];
-  while (instance.isNodeExpanded(currentNode) && instance.getNavigableChildrenIds(currentNode).length > 0) {
-    currentNode = instance.getNavigableChildrenIds(currentNode).pop();
+  let currentItem = siblings[itemIndex - 1];
+  while (instance.isNodeExpanded(currentItem) && instance.getNavigableChildrenIds(currentItem).length > 0) {
+    currentItem = instance.getNavigableChildrenIds(currentItem).pop();
   }
-  return currentNode;
+  return currentItem;
 };
-export const getNextNode = (instance, nodeId) => {
+export const getNextNode = (instance, itemId) => {
   // If expanded get first child
-  if (instance.isNodeExpanded(nodeId) && instance.getNavigableChildrenIds(nodeId).length > 0) {
-    return instance.getNavigableChildrenIds(nodeId)[0];
+  if (instance.isNodeExpanded(itemId) && instance.getNavigableChildrenIds(itemId).length > 0) {
+    return instance.getNavigableChildrenIds(itemId)[0];
   }
-  let node = instance.getNode(nodeId);
-  while (node != null) {
+  let item = instance.getNode(itemId);
+  while (item != null) {
     // Try to get next sibling
-    const siblings = instance.getNavigableChildrenIds(node.parentId);
-    const nextSibling = siblings[siblings.indexOf(node.id) + 1];
+    const siblings = instance.getNavigableChildrenIds(item.parentId);
+    const nextSibling = siblings[siblings.indexOf(item.id) + 1];
     if (nextSibling) {
       return nextSibling;
     }
 
     // If the sibling does not exist, go up a level to the parent and try again.
-    node = instance.getNode(node.parentId);
+    item = instance.getNode(item.parentId);
   }
   return null;
 };
 export const getLastNode = instance => {
-  let lastNode = instance.getNavigableChildrenIds(null).pop();
-  while (instance.isNodeExpanded(lastNode)) {
-    lastNode = instance.getNavigableChildrenIds(lastNode).pop();
+  let lastItem = instance.getNavigableChildrenIds(null).pop();
+  while (instance.isNodeExpanded(lastItem)) {
+    lastItem = instance.getNavigableChildrenIds(lastItem).pop();
   }
-  return lastNode;
+  return lastItem;
 };
 export const getFirstNode = instance => instance.getNavigableChildrenIds(null)[0];
 export const populateInstance = (instance, methods) => {

package/internals/utils/extractPluginParamsFromProps.js

@@ -18,8 +18,8 @@ export const extractPluginParamsFromProps = _ref => {
   const pluginParams = {
     plugins,
     rootRef,
-    slots: slots != null ? slots : {},
-    slotProps: slotProps != null ? slotProps : {},
+    slots: slots ?? {},
+    slotProps: slotProps ?? {},
     apiRef
   };
   const otherProps = {};

package/internals/utils/utils.js

@@ -1,3 +1,4 @@
+// https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
 export const getActiveElement = (root = document) => {
   const activeEl = root.activeElement;
   if (!activeEl) {

package/modern/RichTreeView/RichTreeView.js

@@ -36,7 +36,7 @@ function WrappedTreeItem({
   slotProps,
   label,
   id,
-  nodeId,
+  itemId,
   children
 }) {
   const Item = slots?.item ?? TreeItem;
@@ -44,12 +44,12 @@ function WrappedTreeItem({
     elementType: Item,
     externalSlotProps: slotProps?.item,
     additionalProps: {
-      nodeId,
+      itemId,
       id,
       label
     },
     ownerState: {
-      nodeId,
+      itemId,
       label
     }
   });
@@ -57,7 +57,7 @@ function WrappedTreeItem({
     children: children
   }));
 }
-const childrenWarning = buildWarning(['MUI X: The `RichTreeView` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop', 'Check the documentation for more details: https://next.mui.com/x/react-tree-view/rich-tree-view/items/']);
+const childrenWarning = buildWarning(['MUI X: The `RichTreeView` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
 
 /**
  *
@@ -107,7 +107,7 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
   const nodesToRender = instance.getNodesToRender();
   const renderNode = ({
     label,
-    nodeId,
+    itemId,
     id,
     children
   }) => {
@@ -116,9 +116,9 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
       slotProps: slotProps,
       label: label,
       id: id,
-      nodeId: nodeId,
+      itemId: itemId,
       children: children?.map(renderNode)
-    }, nodeId);
+    }, itemId);
   };
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     value: contextValue,
@@ -137,7 +137,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
-      focusNode: PropTypes.func.isRequired,
+      focusItem: PropTypes.func.isRequired,
       getItem: PropTypes.func.isRequired
     })
   }),
@@ -147,17 +147,17 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is not controlled.
    * @default []
    */
-  defaultExpandedNodes: PropTypes.arrayOf(PropTypes.string),
+  defaultExpandedItems: PropTypes.arrayOf(PropTypes.string),
   /**
-   * Selected node ids. (Uncontrolled)
+   * Selected item ids. (Uncontrolled)
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    * @default []
    */
-  defaultSelectedNodes: PropTypes.any,
+  defaultSelectedItems: PropTypes.any,
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
@@ -169,10 +169,10 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   disableSelection: PropTypes.bool,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is controlled.
    */
-  expandedNodes: PropTypes.arrayOf(PropTypes.string),
+  expandedItems: PropTypes.arrayOf(PropTypes.string),
   /**
    * Used to determine the string label for a given item.
    *
@@ -212,42 +212,42 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   /**
    * Callback fired when tree items are expanded/collapsed.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeIds The ids of the expanded nodes.
+   * @param {array} itemIds The ids of the expanded items.
    */
-  onExpandedNodesChange: PropTypes.func,
+  onExpandedItemsChange: PropTypes.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeId The nodeId of the modified node.
-   * @param {array} isExpanded `true` if the node has just been expanded, `false` if it has just been collapsed.
+   * @param {array} itemId The itemId of the modified item.
+   * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
-  onNodeExpansionToggle: PropTypes.func,
+  onItemExpansionToggle: PropTypes.func,
   /**
    * Callback fired when tree items are focused.
    * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
-   * @param {string} nodeId The id of the node focused.
-   * @param {string} value of the focused node.
+   * @param {string} itemId The id of the focused item.
+   * @param {string} value of the focused item.
    */
-  onNodeFocus: PropTypes.func,
+  onItemFocus: PropTypes.func,
   /**
    * Callback fired when a tree item is selected or deselected.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeId The nodeId of the modified node.
-   * @param {array} isSelected `true` if the node has just been selected, `false` if it has just been deselected.
+   * @param {array} itemId The itemId of the modified item.
+   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
-  onNodeSelectionToggle: PropTypes.func,
+  onItemSelectionToggle: PropTypes.func,
   /**
    * Callback fired when tree items are selected/deselected.
    * @param {React.SyntheticEvent} event The event source of the callback
-   * @param {string[] | string} nodeIds The ids of the selected nodes.
+   * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */
-  onSelectedNodesChange: PropTypes.func,
+  onSelectedItemsChange: PropTypes.func,
   /**
-   * Selected node ids. (Controlled)
+   * Selected item ids. (Controlled)
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
-  selectedNodes: PropTypes.any,
+  selectedItems: PropTypes.any,
   /**
    * The props used for each component slot.
    * @default {}