@mui/x-tree-view 7.0.0 → 7.1.1

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

@@ -0,0 +1,104 @@
+import { TreeViewNode, DefaultizedProps, TreeViewPluginSignature } from '../../models';
+import { TreeViewItemId } from '../../../models';
+interface TreeViewItemProps {
+    label: string;
+    itemId: string;
+    id: string | undefined;
+    children?: TreeViewItemProps[];
+}
+export interface UseTreeViewItemsPublicAPI<R extends {}> {
+    /**
+     * Get the item with the given id.
+     * @param {string} itemId The id of the item to return.
+     * @returns {R} The item with the given id.
+     */
+    getItem: (itemId: string) => R;
+}
+export interface UseTreeViewItemsInstance<R extends {}> extends UseTreeViewItemsPublicAPI<R> {
+    getNode: (itemId: string) => TreeViewNode;
+    getItemsToRender: () => TreeViewItemProps[];
+    getChildrenIds: (itemId: string | null) => string[];
+    getNavigableChildrenIds: (itemId: string | null) => 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.
+     */
+    preventItemUpdates: () => void;
+    /**
+     * Check if the updates to the state based on the `items` prop are prevented.
+     * This is useful when `useTreeViewJSXNodes` is used to avoid having conflicting sources of truth.
+     * @returns {boolean} `true` if the updates to the state based on the `items` prop are prevented.
+     */
+    areItemUpdatesPrevented: () => boolean;
+}
+export interface UseTreeViewItemsParameters<R extends {}> {
+    /**
+     * If `true`, will allow focus on disabled items.
+     * @default false
+     */
+    disabledItemsFocusable?: boolean;
+    items: readonly R[];
+    /**
+     * Used to determine if a given item should be disabled.
+     * @template R
+     * @param {R} item The item to check.
+     * @returns {boolean} `true` if the item should be disabled.
+     */
+    isItemDisabled?: (item: R) => boolean;
+    /**
+     * Used to determine the string label for a given item.
+     *
+     * @template R
+     * @param {R} item The item to check.
+     * @returns {string} The label of the item.
+     * @default (item) => item.label
+     */
+    getItemLabel?: (item: R) => string;
+    /**
+     * Used to determine the id of a given item.
+     *
+     * @template R
+     * @param {R} item The item to check.
+     * @returns {string} The id of the item.
+     * @default (item) => item.id
+     */
+    getItemId?: (item: R) => TreeViewItemId;
+}
+export type UseTreeViewItemsDefaultizedParameters<R extends {}> = DefaultizedProps<UseTreeViewItemsParameters<R>, 'disabledItemsFocusable'>;
+interface UseTreeViewItemsEventLookup {
+    removeItem: {
+        params: {
+            id: string;
+        };
+    };
+}
+export interface TreeViewItemIdAndChildren {
+    id: TreeViewItemId;
+    children?: TreeViewItemIdAndChildren[];
+}
+export interface UseTreeViewItemsState<R extends {}> {
+    items: {
+        nodeTree: TreeViewItemIdAndChildren[];
+        nodeMap: TreeViewNodeMap;
+        itemMap: TreeViewItemMap<R>;
+    };
+}
+interface UseTreeViewItemsContextValue extends Pick<UseTreeViewItemsDefaultizedParameters<any>, 'disabledItemsFocusable'> {
+}
+export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
+    params: UseTreeViewItemsParameters<any>;
+    defaultizedParams: UseTreeViewItemsDefaultizedParameters<any>;
+    instance: UseTreeViewItemsInstance<any>;
+    publicAPI: UseTreeViewItemsPublicAPI<any>;
+    events: UseTreeViewItemsEventLookup;
+    state: UseTreeViewItemsState<any>;
+    contextValue: UseTreeViewItemsContextValue;
+}>;
+export type TreeViewNodeMap = {
+    [itemId: string]: TreeViewNode;
+};
+export type TreeViewItemMap<R extends {}> = {
+    [itemId: string]: R;
+};
+export {};

package/internals/plugins/useTreeViewJSXItems/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewJSXItems } from './useTreeViewJSXItems';
+export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters, UseTreeViewItemsDefaultizedParameters, } from './useTreeViewJSXItems.types';

package/internals/plugins/useTreeViewJSXItems/index.js

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

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '../../models';
+import { UseTreeViewJSXItemsSignature } from './useTreeViewJSXItems.types';
+export declare const useTreeViewJSXItems: TreeViewPlugin<UseTreeViewJSXItemsSignature>;

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

@@ -7,45 +7,46 @@ 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.', `Two 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(itemId => {
+  const removeJSXItem = useEventCallback(itemId => {
     setState(prevState => {
-      const newNodeMap = _extends({}, prevState.nodes.nodeMap);
-      const newItemMap = _extends({}, prevState.nodes.itemMap);
+      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', {
+    publishTreeViewEvent(instance, 'removeItem', {
       id: itemId
     });
   });
@@ -63,12 +64,12 @@ export const useTreeViewJSXNodes = ({
     };
   });
   populateInstance(instance, {
-    insertJSXNode,
-    removeJSXNode,
+    insertJSXItem,
+    removeJSXItem,
     mapFirstCharFromJSX
   });
 };
-const useTreeViewJSXNodesItemPlugin = ({
+const useTreeViewJSXItemsItemPlugin = ({
   props,
   rootRef,
   contentRef
@@ -103,9 +104,9 @@ const useTreeViewJSXNodesItemPlugin = ({
     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({
+      instance.insertJSXItem({
         id: itemId,
         idAttribute: id,
         index,
@@ -113,7 +114,7 @@ const useTreeViewJSXNodesItemPlugin = ({
         expandable,
         disabled
       });
-      return () => instance.removeJSXNode(itemId);
+      return () => instance.removeJSXItem(itemId);
     }
     return undefined;
   }, [instance, parentId, index, itemId, expandable, disabled, id]);
@@ -128,12 +129,12 @@ const useTreeViewJSXNodesItemPlugin = ({
     rootRef: handleRootRef
   };
 };
-useTreeViewJSXNodes.itemPlugin = useTreeViewJSXNodesItemPlugin;
-useTreeViewJSXNodes.wrapItem = ({
+useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
+useTreeViewJSXItems.wrapItem = ({
   children,
   itemId
 }) => /*#__PURE__*/_jsx(DescendantProvider, {
   id: itemId,
   children: children
 });
-useTreeViewJSXNodes.params = {};
+useTreeViewJSXItems.params = {};

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

@@ -0,0 +1,18 @@
+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 UseTreeViewJSXItemsParameters {
+}
+export interface UseTreeViewItemsDefaultizedParameters {
+}
+export type UseTreeViewJSXItemsSignature = TreeViewPluginSignature<{
+    params: UseTreeViewJSXItemsParameters;
+    defaultizedParams: UseTreeViewItemsDefaultizedParameters;
+    instance: UseTreeViewItemsInstance;
+    dependantPlugins: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];
+}>;

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { getFirstNode, getLastNode, getNextNode, getPreviousNode, populateInstance } from '../../useTreeView/useTreeView.utils';
+import { getFirstItem, getLastItem, getNextItem, getPreviousItem, populateInstance } from '../../useTreeView/useTreeView.utils';
 function isPrintableCharacter(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
@@ -15,30 +15,26 @@ function findNextFirstChar(firstChars, startIndex, char) {
 }
 export const useTreeViewKeyboardNavigation = ({
   instance,
-  params
+  params,
+  state
 }) => {
   const theme = useTheme();
   const isRTL = theme.direction === 'rtl';
   const firstCharMap = React.useRef({});
-  const hasFirstCharMapBeenUpdatedImperatively = React.useRef(false);
   const updateFirstCharMap = useEventCallback(callback => {
-    hasFirstCharMapBeenUpdatedImperatively.current = true;
     firstCharMap.current = callback(firstCharMap.current);
   });
   React.useEffect(() => {
-    if (hasFirstCharMapBeenUpdatedImperatively.current) {
+    if (instance.areItemUpdatesPrevented()) {
       return;
     }
     const newFirstCharMap = {};
-    const processItem = item => {
-      const getItemId = params.getItemId;
-      const itemId = getItemId ? getItemId(item) : item.id;
-      newFirstCharMap[itemId] = instance.getNode(itemId).label.substring(0, 1).toLowerCase();
-      item.children?.forEach(processItem);
+    const processItem = node => {
+      newFirstCharMap[node.id] = node.label.substring(0, 1).toLowerCase();
     };
-    params.items.forEach(processItem);
+    Object.values(state.items.nodeMap).forEach(processItem);
     firstCharMap.current = newFirstCharMap;
-  }, [params.items, params.getItemId, instance]);
+  }, [state.items.nodeMap, params.getItemId, instance]);
   const getFirstMatchingItem = (itemId, firstChar) => {
     let start;
     let index;
@@ -48,8 +44,8 @@ export const useTreeViewKeyboardNavigation = ({
     // 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 shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isNodeDisabled(mapItemId);
+      const visible = map.parentId ? instance.isItemExpanded(map.parentId) : true;
+      const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isItemDisabled(mapItemId);
       if (visible && !shouldBeSkipped) {
         firstCharIds.push(mapItemId);
         firstChars.push(firstCharMap.current[mapItemId]);
@@ -76,9 +72,9 @@ export const useTreeViewKeyboardNavigation = ({
     }
     return null;
   };
-  const canToggleItemSelection = itemId => !params.disableSelection && !instance.isNodeDisabled(itemId);
+  const canToggleItemSelection = itemId => !params.disableSelection && !instance.isItemDisabled(itemId);
   const canToggleItemExpansion = itemId => {
-    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
@@ -94,7 +90,7 @@ export const useTreeViewKeyboardNavigation = ({
 
     // 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();
@@ -103,26 +99,26 @@ export const useTreeViewKeyboardNavigation = ({
               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();
             }
           }
@@ -132,7 +128,7 @@ export const useTreeViewKeyboardNavigation = ({
       // 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);
@@ -152,7 +148,7 @@ export const useTreeViewKeyboardNavigation = ({
       // 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);
@@ -173,14 +169,14 @@ export const useTreeViewKeyboardNavigation = ({
       // 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();
           }
           break;
@@ -190,8 +186,8 @@ export const useTreeViewKeyboardNavigation = ({
       // 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;
@@ -203,13 +199,13 @@ export const useTreeViewKeyboardNavigation = ({
           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);
           }
@@ -220,7 +216,7 @@ export const useTreeViewKeyboardNavigation = ({
       // 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.
@@ -240,12 +236,12 @@ export const useTreeViewKeyboardNavigation = ({
         }
 
       // 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;
@@ -255,9 +251,9 @@ export const useTreeViewKeyboardNavigation = ({
       // 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;

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.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';
@@ -12,7 +12,7 @@ export interface UseTreeViewKeyboardNavigationInstance {
 export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
     instance: UseTreeViewKeyboardNavigationInstance;
     dependantPlugins: [
-        UseTreeViewNodesSignature,
+        UseTreeViewItemsSignature,
         UseTreeViewSelectionSignature,
         UseTreeViewFocusSignature,
         UseTreeViewExpansionSignature

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -1,19 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { populateInstance, getNextNode, getFirstNode, getLastNode } from '../../useTreeView/useTreeView.utils';
+import { populateInstance, getNextItem, getFirstItem, getLastItem } from '../../useTreeView/useTreeView.utils';
 import { findOrderInTremauxTree } from './useTreeViewSelection.utils';
 export const useTreeViewSelection = ({
   instance,
   params,
   models
 }) => {
-  const lastSelectedNode = React.useRef(null);
+  const lastSelectedItem = React.useRef(null);
   const lastSelectionWasRange = React.useRef(false);
   const currentRangeSelection = React.useRef([]);
   const setSelectedItems = (event, newSelectedItems) => {
     if (params.onItemSelectionToggle) {
       if (params.multiSelect) {
-        const addedItems = newSelectedItems.filter(itemId => !instance.isNodeSelected(itemId));
+        const addedItems = newSelectedItems.filter(itemId => !instance.isItemSelected(itemId));
         const removedItems = models.selectedItems.value.filter(itemId => !newSelectedItems.includes(itemId));
         addedItems.forEach(itemId => {
           params.onItemSelectionToggle(event, itemId, true);
@@ -35,8 +35,8 @@ export const useTreeViewSelection = ({
     }
     models.selectedItems.setControlledValue(newSelectedItems);
   };
-  const isNodeSelected = itemId => Array.isArray(models.selectedItems.value) ? models.selectedItems.value.indexOf(itemId) !== -1 : models.selectedItems.value === itemId;
-  const selectNode = (event, itemId, multiple = false) => {
+  const isItemSelected = itemId => Array.isArray(models.selectedItems.value) ? models.selectedItems.value.indexOf(itemId) !== -1 : models.selectedItems.value === itemId;
+  const selectItem = (event, itemId, multiple = false) => {
     if (params.disableSelection) {
       return;
     }
@@ -54,27 +54,27 @@ export const useTreeViewSelection = ({
       const newSelected = params.multiSelect ? [itemId] : itemId;
       setSelectedItems(event, newSelected);
     }
-    lastSelectedNode.current = itemId;
+    lastSelectedItem.current = itemId;
     lastSelectionWasRange.current = false;
     currentRangeSelection.current = [];
   };
-  const getNodesInRange = (nodeAId, nodeBId) => {
-    const [first, last] = findOrderInTremauxTree(instance, nodeAId, nodeBId);
-    const nodes = [first];
+  const getItemsInRange = (itemAId, itemBId) => {
+    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, nodes) => {
+  const handleRangeArrowSelect = (event, items) => {
     let base = models.selectedItems.value.slice();
     const {
       start,
       next,
       current
-    } = nodes;
+    } = items;
     if (!next || !current) {
       return;
     }
@@ -95,32 +95,32 @@ export const useTreeViewSelection = ({
     }
     setSelectedItems(event, base);
   };
-  const handleRangeSelect = (event, nodes) => {
+  const handleRangeSelect = (event, items) => {
     let base = models.selectedItems.value.slice();
     const {
       start,
       end
-    } = nodes;
-    // If last selection was a range selection ignore nodes that were selected.
+    } = 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, nodes, stacked = false) => {
+  const selectRange = (event, items, stacked = false) => {
     if (params.disableSelection) {
       return;
     }
     const {
-      start = lastSelectedNode.current,
+      start = lastSelectedItem.current,
       end,
       current
-    } = nodes;
+    } = items;
     if (stacked) {
       handleRangeArrowSelect(event, {
         start,
@@ -136,28 +136,28 @@ export const useTreeViewSelection = ({
     lastSelectionWasRange.current = true;
   };
   const rangeSelectToFirst = (event, itemId) => {
-    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, itemId) => {
-    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
@@ -178,11 +178,11 @@ useTreeViewSelection.models = {
     getDefaultValue: params => params.defaultSelectedItems
   }
 };
-const DEFAULT_SELECTED_NODES = [];
+const DEFAULT_SELECTED_ITEMS = [];
 useTreeViewSelection.getDefaultizedParams = params => _extends({}, params, {
   disableSelection: params.disableSelection ?? false,
   multiSelect: params.multiSelect ?? false,
-  defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_NODES : null)
+  defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null)
 });
 useTreeViewSelection.params = {
   disableSelection: true,