@mui/x-tree-view 7.0.0 → 7.1.1

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import type { DefaultizedProps, TreeViewItemRange, TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 export interface UseTreeViewSelectionInstance {
-    isNodeSelected: (itemId: string) => boolean;
-    selectNode: (event: React.SyntheticEvent, itemId: string, multiple?: boolean) => void;
-    selectRange: (event: React.SyntheticEvent, nodes: TreeViewItemRange, stacked?: boolean) => void;
+    isItemSelected: (itemId: string) => boolean;
+    selectItem: (event: React.SyntheticEvent, itemId: string, multiple?: boolean) => void;
+    selectRange: (event: React.SyntheticEvent, items: TreeViewItemRange, stacked?: boolean) => void;
     rangeSelectToFirst: (event: React.KeyboardEvent, itemId: string) => void;
     rangeSelectToLast: (event: React.KeyboardEvent, itemId: string) => void;
 }
@@ -58,9 +58,9 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
     contextValue: UseTreeViewSelectionContextValue;
     modelNames: 'selectedItems';
     dependantPlugins: [
-        UseTreeViewNodesSignature,
+        UseTreeViewItemsSignature,
         UseTreeViewExpansionSignature,
-        UseTreeViewNodesSignature
+        UseTreeViewItemsSignature
     ];
 }>;
 export {};

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

@@ -1,17 +1,17 @@
 import { TreeViewInstance } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 /**
  * This is used to determine the start and end of a selection range so
- * we can get the nodes between the two border nodes.
+ * we can get the items between the two border items.
  *
- * It finds the nodes' common ancestor using
+ * It finds the items' common ancestor using
  * a naive implementation of a lowest common ancestor algorithm
  * (https://en.wikipedia.org/wiki/Lowest_common_ancestor).
- * Then compares the ancestor's 2 children that are ancestors of nodeA and NodeB
- * so we can compare their indexes to work out which node comes first in a depth first search.
+ * Then compares the ancestor's 2 children that are ancestors of itemA and ItemB
+ * so we can compare their indexes to work out which item comes first in a depth first search.
  * (https://en.wikipedia.org/wiki/Depth-first_search)
  *
- * Another way to put it is which node is shallower in a trémaux tree
+ * Another way to put it is which item is shallower in a trémaux tree
  * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
  */
-export declare const findOrderInTremauxTree: (instance: TreeViewInstance<[UseTreeViewNodesSignature]>, nodeAId: string, nodeBId: string) => string[];
+export declare const findOrderInTremauxTree: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>, nodeAId: string, nodeBId: string) => string[];

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js

@@ -1,15 +1,15 @@
 /**
  * This is used to determine the start and end of a selection range so
- * we can get the nodes between the two border nodes.
+ * we can get the items between the two border items.
  *
- * It finds the nodes' common ancestor using
+ * It finds the items' common ancestor using
  * a naive implementation of a lowest common ancestor algorithm
  * (https://en.wikipedia.org/wiki/Lowest_common_ancestor).
- * Then compares the ancestor's 2 children that are ancestors of nodeA and NodeB
- * so we can compare their indexes to work out which node comes first in a depth first search.
+ * Then compares the ancestor's 2 children that are ancestors of itemA and ItemB
+ * so we can compare their indexes to work out which item comes first in a depth first search.
  * (https://en.wikipedia.org/wiki/Depth-first_search)
  *
- * Another way to put it is which node is shallower in a trémaux tree
+ * Another way to put it is which item is shallower in a trémaux tree
  * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
  */
 export const findOrderInTremauxTree = (instance, nodeAId, nodeBId) => {

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

@@ -1,9 +1,9 @@
 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]>, 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;
+import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
+export declare const getPreviousItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getNextItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>, itemId: string) => string | null;
+export declare const getLastItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
+export declare const getFirstItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>) => string;
 export declare const populateInstance: <T extends TreeViewAnyPluginSignature>(instance: TreeViewUsedInstance<T>, methods: T["instance"]) => void;
 export declare const populatePublicAPI: <T extends TreeViewAnyPluginSignature>(publicAPI: TreeViewUsedPublicAPI<T>, methods: T["publicAPI"]) => void;

package/internals/useTreeView/useTreeView.utils.js

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

package/internals/useTreeView/useTreeViewModels.js

@@ -22,7 +22,7 @@ export const useTreeViewModels = (plugins, props) => {
     return initialState;
   });
   const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
-    const value = model.isControlled ? props[modelName] : modelsState[modelName];
+    const value = props[modelName] ?? modelsState[modelName];
     return [modelName, {
       value,
       setControlledValue: newValue => {
@@ -53,7 +53,7 @@ export const useTreeViewModels = (plugins, props) => {
         if (!model.isControlled && defaultValue !== newDefaultValue) {
           console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled TreeView after being initialized. ` + `To suppress this warning opt to use a controlled TreeView.`].join('\n'));
         }
-      }, [JSON.stringify(defaultValue)]);
+      }, [JSON.stringify(newDefaultValue)]);
     });
   }
   /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */

package/modern/RichTreeView/RichTreeView.js

@@ -29,7 +29,8 @@ export const RichTreeViewRoot = styled('ul', {
   padding: 0,
   margin: 0,
   listStyle: 'none',
-  outline: 0
+  outline: 0,
+  position: 'relative'
 });
 function WrappedTreeItem({
   slots,
@@ -104,8 +105,8 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     getSlotProps: getRootProps,
     ownerState: props
   });
-  const nodesToRender = instance.getNodesToRender();
-  const renderNode = ({
+  const itemsToRender = instance.getItemsToRender();
+  const renderItem = ({
     label,
     itemId,
     id,
@@ -117,13 +118,13 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
       label: label,
       id: id,
       itemId: itemId,
-      children: children?.map(renderNode)
+      children: children?.map(renderItem)
     }, itemId);
   };
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
-      children: nodesToRender.map(renderNode)
+      children: itemsToRender.map(renderItem)
     }))
   });
 });
@@ -138,7 +139,8 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
       focusItem: PropTypes.func.isRequired,
-      getItem: PropTypes.func.isRequired
+      getItem: PropTypes.func.isRequired,
+      setItemExpansion: PropTypes.func.isRequired
     })
   }),
   /**
@@ -174,12 +176,12 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
   /**
-   * Used to determine the string label for a given item.
+   * 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`
+   * @default (item) => item.id
    */
   getItemId: PropTypes.func,
   /**
@@ -188,7 +190,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @template R
    * @param {R} item The item to check.
    * @returns {string} The label of the item.
-   * @default `(item) => item.label`
+   * @default (item) => item.label
    */
   getItemLabel: PropTypes.func,
   /**

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -28,7 +28,8 @@ export const SimpleTreeViewRoot = styled('ul', {
   padding: 0,
   margin: 0,
   listStyle: 'none',
-  outline: 0
+  outline: 0,
+  position: 'relative'
 });
 const EMPTY_ITEMS = [];
 const itemsPropWarning = buildWarning(['MUI X: The `SimpleTreeView` component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/']);
@@ -96,7 +97,8 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
       focusItem: PropTypes.func.isRequired,
-      getItem: PropTypes.func.isRequired
+      getItem: PropTypes.func.isRequired,
+      setItemExpansion: PropTypes.func.isRequired
     })
   }),
   /**

package/modern/SimpleTreeView/SimpleTreeView.plugins.js

@@ -1,5 +1,5 @@
 import { DEFAULT_TREE_VIEW_PLUGINS } from '../internals/plugins/defaultPlugins';
-import { useTreeViewJSXNodes } from '../internals/plugins/useTreeViewJSXNodes';
-export const SIMPLE_TREE_VIEW_PLUGINS = [...DEFAULT_TREE_VIEW_PLUGINS, useTreeViewJSXNodes];
+import { useTreeViewJSXItems } from '../internals/plugins/useTreeViewJSXItems';
+export const SIMPLE_TREE_VIEW_PLUGINS = [...DEFAULT_TREE_VIEW_PLUGINS, useTreeViewJSXItems];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/modern/TreeItem/TreeItem.js

@@ -186,10 +186,10 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     return Boolean(reactChildren);
   };
   const expandable = isExpandable(children);
-  const expanded = instance.isNodeExpanded(itemId);
-  const focused = instance.isNodeFocused(itemId);
-  const selected = instance.isNodeSelected(itemId);
-  const disabled = instance.isNodeDisabled(itemId);
+  const expanded = instance.isItemExpanded(itemId);
+  const focused = instance.isItemFocused(itemId);
+  const selected = instance.isItemSelected(itemId);
+  const disabled = instance.isItemDisabled(itemId);
   const ownerState = _extends({}, props, {
     expanded,
     focused,

package/modern/TreeItem/useTreeItemState.js

@@ -6,11 +6,11 @@ export function useTreeItemState(itemId) {
       multiSelect
     }
   } = useTreeViewContext();
-  const expandable = instance.isNodeExpandable(itemId);
-  const expanded = instance.isNodeExpanded(itemId);
-  const focused = instance.isNodeFocused(itemId);
-  const selected = instance.isNodeSelected(itemId);
-  const disabled = instance.isNodeDisabled(itemId);
+  const expandable = instance.isItemExpandable(itemId);
+  const expanded = instance.isItemExpanded(itemId);
+  const focused = instance.isItemFocused(itemId);
+  const selected = instance.isItemSelected(itemId);
+  const disabled = instance.isItemDisabled(itemId);
   const handleExpansion = event => {
     if (!disabled) {
       if (!focused) {
@@ -19,8 +19,8 @@ export function useTreeItemState(itemId) {
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
       // If already expanded and trying to toggle selection don't close
-      if (expandable && !(multiple && instance.isNodeExpanded(itemId))) {
-        instance.toggleNodeExpansion(event, itemId);
+      if (expandable && !(multiple && instance.isItemExpanded(itemId))) {
+        instance.toggleItemExpansion(event, itemId);
       }
     }
   };
@@ -36,10 +36,10 @@ export function useTreeItemState(itemId) {
             end: itemId
           });
         } else {
-          instance.selectNode(event, itemId, true);
+          instance.selectItem(event, itemId, true);
         }
       } else {
-        instance.selectNode(event, itemId);
+        instance.selectItem(event, itemId);
       }
     }
   };

package/modern/TreeView/TreeView.js

@@ -70,7 +70,8 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
       focusItem: PropTypes.func.isRequired,
-      getItem: PropTypes.func.isRequired
+      getItem: PropTypes.func.isRequired,
+      setItemExpansion: PropTypes.func.isRequired
     })
   }),
   /**

package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -11,10 +11,10 @@ export const useTreeItem2Utils = ({
   } = useTreeViewContext();
   const status = {
     expandable: Boolean(Array.isArray(children) ? children.length : children),
-    expanded: instance.isNodeExpanded(itemId),
-    focused: instance.isNodeFocused(itemId),
-    selected: instance.isNodeSelected(itemId),
-    disabled: instance.isNodeDisabled(itemId)
+    expanded: instance.isItemExpanded(itemId),
+    focused: instance.isItemFocused(itemId),
+    selected: instance.isItemSelected(itemId),
+    disabled: instance.isItemDisabled(itemId)
   };
   const handleExpansion = event => {
     if (status.disabled) {
@@ -26,8 +26,8 @@ export const useTreeItem2Utils = ({
     const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
     // If already expanded and trying to toggle selection don't close
-    if (status.expandable && !(multiple && instance.isNodeExpanded(itemId))) {
-      instance.toggleNodeExpansion(event, itemId);
+    if (status.expandable && !(multiple && instance.isItemExpanded(itemId))) {
+      instance.toggleItemExpansion(event, itemId);
     }
   };
   const handleSelection = event => {
@@ -44,10 +44,10 @@ export const useTreeItem2Utils = ({
           end: itemId
         });
       } else {
-        instance.selectNode(event, itemId, true);
+        instance.selectItem(event, itemId, true);
       }
     } else {
-      instance.selectNode(event, itemId);
+      instance.selectItem(event, itemId);
     }
   };
   const interactions = {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.0.0
+ * @mui/x-tree-view v7.1.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/TreeViewProvider/DescendantProvider.js

@@ -46,7 +46,7 @@ const noop = () => {};
  * We use this for focus management, keyboard navigation, and typeahead
  * functionality for some components.
  *
- * The hook accepts the element node
+ * The hook accepts the element item
  *
  * Our main goals with this are:
  *   1) maximum composability,

package/modern/internals/index.js

@@ -1,4 +1,15 @@
 export { useTreeView } from './useTreeView';
 export { TreeViewProvider } from './TreeViewProvider';
+export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
+// Plugins
 export { DEFAULT_TREE_VIEW_PLUGINS } from './plugins/defaultPlugins';
+export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
+export { useTreeViewSelection } from './plugins/useTreeViewSelection';
+export { useTreeViewFocus } from './plugins/useTreeViewFocus';
+export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavigation';
+export { useTreeViewId } from './plugins/useTreeViewId';
+export { useTreeViewIcons } from './plugins/useTreeViewIcons';
+export { useTreeViewItems } from './plugins/useTreeViewItems';
+export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';
+export { buildWarning } from './utils/warning';
 export { extractPluginParamsFromProps } from './utils/extractPluginParamsFromProps';

package/modern/internals/plugins/defaultPlugins.js

@@ -1,10 +1,10 @@
 import { useTreeViewId } from './useTreeViewId';
-import { useTreeViewNodes } from './useTreeViewNodes';
+import { useTreeViewItems } from './useTreeViewItems';
 import { useTreeViewExpansion } from './useTreeViewExpansion';
 import { useTreeViewSelection } from './useTreeViewSelection';
 import { useTreeViewFocus } from './useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';
 import { useTreeViewIcons } from './useTreeViewIcons';
-export const DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewNodes, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
+export const DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

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

@@ -1,40 +1,50 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 export const useTreeViewExpansion = ({
   instance,
+  publicAPI,
   params,
   models
 }) => {
+  const expandedItemsMap = React.useMemo(() => {
+    const temp = new Map();
+    models.expandedItems.value.forEach(id => {
+      temp.set(id, true);
+    });
+    return temp;
+  }, [models.expandedItems.value]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const isNodeExpanded = React.useCallback(itemId => {
-    return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(itemId) !== -1 : false;
-  }, [models.expandedItems.value]);
-  const isNodeExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
-  const toggleNodeExpansion = useEventCallback((event, itemId) => {
-    if (itemId == null) {
+  const isItemExpanded = React.useCallback(itemId => expandedItemsMap.has(itemId), [expandedItemsMap]);
+  const isItemExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
+  const toggleItemExpansion = useEventCallback((event, itemId) => {
+    const isExpandedBefore = instance.isItemExpanded(itemId);
+    instance.setItemExpansion(event, itemId, !isExpandedBefore);
+  });
+  const setItemExpansion = useEventCallback((event, itemId, isExpanded) => {
+    const isExpandedBefore = instance.isItemExpanded(itemId);
+    if (isExpandedBefore === isExpanded) {
       return;
     }
-    const isExpandedBefore = models.expandedItems.value.indexOf(itemId) !== -1;
     let newExpanded;
-    if (isExpandedBefore) {
-      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
-    } else {
+    if (isExpanded) {
       newExpanded = [itemId].concat(models.expandedItems.value);
+    } else {
+      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
     }
     if (params.onItemExpansionToggle) {
-      params.onItemExpansionToggle(event, itemId, !isExpandedBefore);
+      params.onItemExpansionToggle(event, itemId, isExpanded);
     }
     setExpandedItems(event, newExpanded);
   });
   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) {
@@ -46,20 +56,24 @@ export const useTreeViewExpansion = ({
     }
   };
   populateInstance(instance, {
-    isNodeExpanded,
-    isNodeExpandable,
-    toggleNodeExpansion,
+    isItemExpanded,
+    isItemExpandable,
+    setItemExpansion,
+    toggleItemExpansion,
     expandAllSiblings
   });
+  populatePublicAPI(publicAPI, {
+    setItemExpansion
+  });
 };
 useTreeViewExpansion.models = {
   expandedItems: {
     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,