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

package/TreeView/TreeView.js

@@ -30,7 +30,7 @@ const warn = () => {
 
 /**
  * This component has been deprecated in favor of the new `SimpleTreeView` component.
- * You can have a look at how to migrate to the new component in the v7 [migration guide](https://next.mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
+ * You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
  *
  * Demos:
  *
@@ -69,7 +69,7 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
-      focusNode: PropTypes.func.isRequired,
+      focusItem: PropTypes.func.isRequired,
       getItem: PropTypes.func.isRequired
     })
   }),
@@ -83,17 +83,17 @@ process.env.NODE_ENV !== "production" ? TreeView.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
@@ -105,10 +105,10 @@ process.env.NODE_ENV !== "production" ? TreeView.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),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -122,42 +122,42 @@ process.env.NODE_ENV !== "production" ? TreeView.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.
    */

package/hooks/index.d.ts

@@ -1 +1,2 @@
 export { useTreeViewApiRef } from './useTreeViewApiRef';
+export { useTreeItem2Utils } from './useTreeItem2Utils';

package/hooks/index.js

@@ -1 +1,2 @@
-export { useTreeViewApiRef } from './useTreeViewApiRef';
+export { useTreeViewApiRef } from './useTreeViewApiRef';
+export { useTreeItem2Utils } from './useTreeItem2Utils';

package/hooks/useTreeItem2Utils/index.d.ts

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

package/hooks/useTreeItem2Utils/index.js

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

package/hooks/useTreeItem2Utils/useTreeItem2Utils.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { UseTreeItem2Status } from '../../useTreeItem2';
+interface UseTreeItem2Interactions {
+    handleExpansion: (event: React.MouseEvent) => void;
+    handleSelection: (event: React.MouseEvent) => void;
+}
+interface UseTreeItem2UtilsReturnValue {
+    interactions: UseTreeItem2Interactions;
+    status: UseTreeItem2Status;
+}
+export declare const useTreeItem2Utils: ({ itemId, children, }: {
+    itemId: string;
+    children: React.ReactNode;
+}) => UseTreeItem2UtilsReturnValue;
+export {};

package/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -0,0 +1,61 @@
+import { useTreeViewContext } from '../../internals/TreeViewProvider/useTreeViewContext';
+export const useTreeItem2Utils = ({
+  itemId,
+  children
+}) => {
+  const {
+    instance,
+    selection: {
+      multiSelect
+    }
+  } = 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)
+  };
+  const handleExpansion = event => {
+    if (status.disabled) {
+      return;
+    }
+    if (!status.focused) {
+      instance.focusItem(event, itemId);
+    }
+    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);
+    }
+  };
+  const handleSelection = event => {
+    if (status.disabled) {
+      return;
+    }
+    if (!status.focused) {
+      instance.focusItem(event, itemId);
+    }
+    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    if (multiple) {
+      if (event.shiftKey) {
+        instance.selectRange(event, {
+          end: itemId
+        });
+      } else {
+        instance.selectNode(event, itemId, true);
+      }
+    } else {
+      instance.selectNode(event, itemId);
+    }
+  };
+  const interactions = {
+    handleExpansion,
+    handleSelection
+  };
+  return {
+    interactions,
+    status
+  };
+};

package/index.d.ts

@@ -1,7 +1,11 @@
-export * from './TreeItem';
 export * from './TreeView';
 export * from './SimpleTreeView';
 export * from './RichTreeView';
+export * from './TreeItem';
+export * from './TreeItem2';
+export * from './useTreeItem2';
+export * from './TreeItem2Icon';
+export * from './TreeItem2Provider';
 export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
 export * from './models';
 export * from './icons';

package/index.js

@@ -1,14 +1,21 @@
 /**
- * @mui/x-tree-view v7.0.0-beta.6
+ * @mui/x-tree-view v7.0.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export * from './TreeItem';
+// Tree View
 export * from './TreeView';
 export * from './SimpleTreeView';
 export * from './RichTreeView';
+
+// Tree Item
+export * from './TreeItem';
+export * from './TreeItem2';
+export * from './useTreeItem2';
+export * from './TreeItem2Icon';
+export * from './TreeItem2Provider';
 export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
 export * from './models';
 export * from './icons';

package/internals/TreeViewProvider/TreeViewContext.d.ts

@@ -4,5 +4,7 @@ import * as React from 'react';
  */
 export declare const TreeViewContext: React.Context<{
     instance: {};
-    runItemPlugins: (options: import("../models").TreeViewItemPluginOptions) => Required<import("../models").TreeViewItemPluginResponse>;
+    publicAPI: {};
+    wrapItem: import("../models").TreeItemWrapper;
+    runItemPlugins: <TProps extends {}>(props: TProps) => Required<import("../models").TreeViewItemPluginResponse>;
 } | null>;

package/internals/TreeViewProvider/TreeViewProvider.types.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { MergePluginsProperty, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginOptions, TreeViewItemPluginResponse } from '../models';
+import { MergePluginsProperty, TreeItemWrapper, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginResponse, TreeViewPublicAPI } from '../models';
 export type TreeViewContextValue<TPlugins extends readonly TreeViewAnyPluginSignature[]> = MergePluginsProperty<TPlugins, 'contextValue'> & {
     instance: TreeViewInstance<TPlugins>;
-    runItemPlugins: (options: TreeViewItemPluginOptions) => Required<TreeViewItemPluginResponse>;
+    publicAPI: TreeViewPublicAPI<TPlugins>;
+    wrapItem: TreeItemWrapper;
+    runItemPlugins: <TProps extends {}>(props: TProps) => Required<TreeViewItemPluginResponse>;
 };
 export interface TreeViewProviderProps<TPlugins extends readonly TreeViewAnyPluginSignature[]> {
     value: TreeViewContextValue<TPlugins>;

package/internals/hooks/useInstanceEventHandler.js

@@ -20,8 +20,7 @@ export function createUseInstanceEventHandler(registryContainer) {
     if (!subscription.current && handlerRef.current) {
       const enhancedHandler = (params, event) => {
         if (!event.defaultMuiPrevented) {
-          var _handlerRef$current;
-          (_handlerRef$current = handlerRef.current) == null || _handlerRef$current.call(handlerRef, params, event);
+          handlerRef.current?.(params, event);
         }
       };
       subscription.current = instance.$$subscribeEvent(eventName, enhancedHandler);
@@ -32,8 +31,7 @@ export function createUseInstanceEventHandler(registryContainer) {
       registryContainer.registry.register(objectRetainedByReact,
       // The callback below will be called once this reference stops being retained
       () => {
-        var _subscription$current;
-        (_subscription$current = subscription.current) == null || _subscription$current.call(subscription);
+        subscription.current?.();
         subscription.current = null;
         cleanupTokenRef.current = null;
       }, cleanupTokenRef.current);
@@ -49,8 +47,7 @@ export function createUseInstanceEventHandler(registryContainer) {
       if (!subscription.current && handlerRef.current) {
         const enhancedHandler = (params, event) => {
           if (!event.defaultMuiPrevented) {
-            var _handlerRef$current2;
-            (_handlerRef$current2 = handlerRef.current) == null || _handlerRef$current2.call(handlerRef, params, event);
+            handlerRef.current?.(params, event);
           }
         };
         subscription.current = instance.$$subscribeEvent(eventName, enhancedHandler);
@@ -62,8 +59,7 @@ export function createUseInstanceEventHandler(registryContainer) {
         cleanupTokenRef.current = null;
       }
       return () => {
-        var _subscription$current2;
-        (_subscription$current2 = subscription.current) == null || _subscription$current2.call(subscription);
+        subscription.current?.();
         subscription.current = null;
       };
     }, [instance, eventName]);
@@ -75,8 +71,7 @@ const registryContainer = {
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_resetCleanupTracking = () => {
-  var _registryContainer$re;
-  (_registryContainer$re = registryContainer.registry) == null || _registryContainer$re.reset();
+  registryContainer.registry?.reset();
   registryContainer.registry = null;
 };
 export const useInstanceEventHandler = createUseInstanceEventHandler(registryContainer);

package/internals/hooks/useLazyRef.d.ts

@@ -1,2 +1 @@
-import * as React from 'react';
-export declare function useLazyRef<T, U>(init: (arg?: U) => T, initArg?: U): React.MutableRefObject<T>;
+export { default as useLazyRef } from '@mui/utils/useLazyRef';

package/internals/hooks/useLazyRef.js

@@ -1,11 +1 @@
-import * as React from 'react';
-const UNINITIALIZED = {};
-
-// See https://github.com/facebook/react/issues/14490 for when to use this.
-export function useLazyRef(init, initArg) {
-  const ref = React.useRef(UNINITIALIZED);
-  if (ref.current === UNINITIALIZED) {
-    ref.current = init(initArg);
-  }
-  return ref;
-}
+export { default as useLazyRef } from '@mui/utils/useLazyRef';

package/internals/hooks/useOnMount.d.ts

@@ -1,2 +1 @@
-import * as React from 'react';
-export declare function useOnMount(fn: React.EffectCallback): void;
+export { default as useOnMount } from '@mui/utils/useOnMount';

package/internals/hooks/useOnMount.js

@@ -1,7 +1 @@
-import * as React from 'react';
-const EMPTY = [];
-export function useOnMount(fn) {
-  /* eslint-disable react-hooks/exhaustive-deps */
-  React.useEffect(fn, EMPTY);
-  /* eslint-enable react-hooks/exhaustive-deps */
-}
+export { default as useOnMount } from '@mui/utils/useOnMount';

package/internals/hooks/useTimeout.d.ts

@@ -1,11 +1 @@
-export declare class Timeout {
-    static create(): Timeout;
-    currentId: ReturnType<typeof setTimeout> | null;
-    /**
-     * Executes `fn` after `delay`, clearing any previously scheduled call.
-     */
-    start(delay: number, fn: Function): void;
-    clear: () => void;
-    disposeEffect: () => () => void;
-}
-export declare function useTimeout(): Timeout;
+export { default as useTimeout } from '@mui/utils/useTimeout';

package/internals/hooks/useTimeout.js

@@ -1,36 +1 @@
-'use client';
-
-import { useLazyRef } from './useLazyRef';
-import { useOnMount } from './useOnMount';
-export class Timeout {
-  constructor() {
-    this.currentId = null;
-    this.clear = () => {
-      if (this.currentId !== null) {
-        clearTimeout(this.currentId);
-        this.currentId = null;
-      }
-    };
-    this.disposeEffect = () => {
-      return this.clear;
-    };
-  }
-  static create() {
-    return new Timeout();
-  }
-  /**
-   * Executes `fn` after `delay`, clearing any previously scheduled call.
-   */
-  start(delay, fn) {
-    this.clear();
-    this.currentId = setTimeout(() => {
-      this.currentId = null;
-      fn();
-    }, delay);
-  }
-}
-export function useTimeout() {
-  const timeout = useLazyRef(Timeout.create).current;
-  useOnMount(timeout.disposeEffect);
-  return timeout;
-}
+export { default as useTimeout } from '@mui/utils/useTimeout';

package/internals/models/plugin.d.ts

@@ -4,7 +4,7 @@ import { TreeViewModel } from './treeView';
 import type { MergePluginsProperty, OptionalIfEmpty } from './helpers';
 import { TreeViewEventLookupElement } from './events';
 import type { TreeViewCorePluginsSignature } from '../corePlugins';
-import type { TreeItemProps } from '../../TreeItem';
+import { TreeViewItemId } from '../../models';
 export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSignature> {
     instance: TreeViewUsedInstance<TSignature>;
     publicAPI: TreeViewUsedPublicAPI<TSignature>;
@@ -117,33 +117,36 @@ type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = {
 };
 export type TreeViewUsedModels<TSignature extends TreeViewAnyPluginSignature> = TSignature['models'] & RemoveSetValue<MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'models'>>;
 export type TreeViewUsedEvents<TSignature extends TreeViewAnyPluginSignature> = TSignature['events'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'events'>;
-export interface TreeViewItemPluginOptions {
-    props: TreeItemProps;
-    ref: React.Ref<HTMLLIElement>;
+export interface TreeViewItemPluginOptions<TProps extends {}> extends TreeViewItemPluginResponse {
+    props: TProps;
 }
 export interface TreeViewItemPluginResponse {
     /**
-     * Props enriched by the plugin.
+     * Root of the `content` slot enriched by the plugin.
      */
-    props?: TreeItemProps;
+    contentRef?: React.RefCallback<HTMLElement> | null;
     /**
-     * Ref enriched by the plugin
+     * Ref of the `root` slot enriched by the plugin
      */
-    ref?: React.Ref<HTMLLIElement>;
-    /**
-     * Render function used to add React wrappers around the TreeItem.
-     * @param {React.ReactNode} children The TreeItem node before this plugin execution.
-     * @returns {React.ReactNode} The wrapped TreeItem.
-     */
-    wrapItem?: (children: React.ReactNode) => React.ReactNode;
+    rootRef?: React.RefCallback<HTMLLIElement> | null;
 }
-export type TreeViewItemPlugin = (options: TreeViewItemPluginOptions) => void | TreeViewItemPluginResponse;
+export type TreeViewItemPlugin<TProps extends {}> = (options: TreeViewItemPluginOptions<TProps>) => void | TreeViewItemPluginResponse;
+export type TreeItemWrapper = (params: {
+    itemId: TreeViewItemId;
+    children: React.ReactNode;
+}) => React.ReactNode;
 export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
     (options: TreeViewPluginOptions<TSignature>): void | TreeViewResponse<TSignature>;
     getDefaultizedParams?: (params: TreeViewUsedParams<TSignature>) => TSignature['defaultizedParams'];
     getInitialState?: (params: TreeViewUsedDefaultizedParams<TSignature>) => TSignature['state'];
     models?: TreeViewModelsInitializer<TSignature>;
     params: Record<keyof TSignature['params'], true>;
-    itemPlugin?: TreeViewItemPlugin;
+    itemPlugin?: TreeViewItemPlugin<any>;
+    /**
+     * Render function used to add React wrappers around the TreeItem.
+     * @param {TreeItemWrapperParams} params The params of the item.
+     * @returns {React.ReactNode} The wrapped items.
+     */
+    wrapItem?: TreeItemWrapper;
 };
 export {};

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -7,46 +7,42 @@ export const useTreeViewExpansion = ({
   params,
   models
 }) => {
-  const setExpandedNodes = (event, value) => {
-    var _params$onExpandedNod;
-    (_params$onExpandedNod = params.onExpandedNodesChange) == null || _params$onExpandedNod.call(params, event, value);
-    models.expandedNodes.setControlledValue(value);
+  const setExpandedItems = (event, value) => {
+    params.onExpandedItemsChange?.(event, value);
+    models.expandedItems.setControlledValue(value);
   };
-  const isNodeExpanded = React.useCallback(nodeId => {
-    return Array.isArray(models.expandedNodes.value) ? models.expandedNodes.value.indexOf(nodeId) !== -1 : false;
-  }, [models.expandedNodes.value]);
-  const isNodeExpandable = React.useCallback(nodeId => {
-    var _instance$getNode;
-    return !!((_instance$getNode = instance.getNode(nodeId)) != null && _instance$getNode.expandable);
-  }, [instance]);
-  const toggleNodeExpansion = useEventCallback((event, nodeId) => {
-    if (nodeId == null) {
+  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) {
       return;
     }
-    const isExpandedBefore = models.expandedNodes.value.indexOf(nodeId) !== -1;
+    const isExpandedBefore = models.expandedItems.value.indexOf(itemId) !== -1;
     let newExpanded;
     if (isExpandedBefore) {
-      newExpanded = models.expandedNodes.value.filter(id => id !== nodeId);
+      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
     } else {
-      newExpanded = [nodeId].concat(models.expandedNodes.value);
+      newExpanded = [itemId].concat(models.expandedItems.value);
     }
-    if (params.onNodeExpansionToggle) {
-      params.onNodeExpansionToggle(event, nodeId, !isExpandedBefore);
+    if (params.onItemExpansionToggle) {
+      params.onItemExpansionToggle(event, itemId, !isExpandedBefore);
     }
-    setExpandedNodes(event, newExpanded);
+    setExpandedItems(event, newExpanded);
   });
-  const expandAllSiblings = (event, nodeId) => {
-    const node = instance.getNode(nodeId);
+  const 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 newExpanded = models.expandedNodes.value.concat(diff);
+    const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
-      if (params.onNodeExpansionToggle) {
-        diff.forEach(newlyExpandedNodeId => {
-          params.onNodeExpansionToggle(event, newlyExpandedNodeId, true);
+      if (params.onItemExpansionToggle) {
+        diff.forEach(newlyExpandedItemId => {
+          params.onItemExpansionToggle(event, newlyExpandedItemId, true);
         });
       }
-      setExpandedNodes(event, newExpanded);
+      setExpandedItems(event, newExpanded);
     }
   };
   populateInstance(instance, {
@@ -57,20 +53,17 @@ export const useTreeViewExpansion = ({
   });
 };
 useTreeViewExpansion.models = {
-  expandedNodes: {
-    getDefaultValue: params => params.defaultExpandedNodes
+  expandedItems: {
+    getDefaultValue: params => params.defaultExpandedItems
   }
 };
 const DEFAULT_EXPANDED_NODES = [];
-useTreeViewExpansion.getDefaultizedParams = params => {
-  var _params$defaultExpand;
-  return _extends({}, params, {
-    defaultExpandedNodes: (_params$defaultExpand = params.defaultExpandedNodes) != null ? _params$defaultExpand : DEFAULT_EXPANDED_NODES
-  });
-};
+useTreeViewExpansion.getDefaultizedParams = params => _extends({}, params, {
+  defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_NODES
+});
 useTreeViewExpansion.params = {
-  expandedNodes: true,
-  defaultExpandedNodes: true,
-  onExpandedNodesChange: true,
-  onNodeExpansionToggle: true
+  expandedItems: true,
+  defaultExpandedItems: true,
+  onExpandedItemsChange: true,
+  onItemExpansionToggle: true
 };

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

@@ -2,42 +2,42 @@ import * as React from 'react';
 import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
 export interface UseTreeViewExpansionInstance {
-    isNodeExpanded: (nodeId: string) => boolean;
-    isNodeExpandable: (nodeId: string) => boolean;
+    isNodeExpanded: (itemId: string) => boolean;
+    isNodeExpandable: (itemId: string) => boolean;
     toggleNodeExpansion: (event: React.SyntheticEvent, value: string) => void;
-    expandAllSiblings: (event: React.KeyboardEvent<HTMLUListElement>, nodeId: string) => void;
+    expandAllSiblings: (event: React.KeyboardEvent, itemId: string) => void;
 }
 export interface UseTreeViewExpansionParameters {
     /**
-     * Expanded node ids.
+     * Expanded item ids.
      * Used when the item's expansion is controlled.
      */
-    expandedNodes?: string[];
+    expandedItems?: string[];
     /**
-     * Expanded node ids.
+     * Expanded item ids.
      * Used when the item's expansion is not controlled.
      * @default []
      */
-    defaultExpandedNodes?: string[];
+    defaultExpandedItems?: string[];
     /**
      * 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?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
+    onExpandedItemsChange?: (event: React.SyntheticEvent, itemIds: string[]) => void;
     /**
      * 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?: (event: React.SyntheticEvent, nodeId: string, isExpanded: boolean) => void;
+    onItemExpansionToggle?: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
 }
-export type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<UseTreeViewExpansionParameters, 'defaultExpandedNodes'>;
+export type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<UseTreeViewExpansionParameters, 'defaultExpandedItems'>;
 export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     params: UseTreeViewExpansionParameters;
     defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
     instance: UseTreeViewExpansionInstance;
-    modelNames: 'expandedNodes';
+    modelNames: 'expandedItems';
     dependantPlugins: [UseTreeViewNodesSignature];
 }>;