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

package/TreeView/TreeView.js

@@ -69,7 +69,8 @@ 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
     })
   }),
   /**
@@ -82,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
@@ -104,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.
@@ -121,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: ({ nodeId, children, }: {
+    nodeId: string;
+    children: React.ReactNode;
+}) => UseTreeItem2UtilsReturnValue;
+export {};

package/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -0,0 +1,61 @@
+import { useTreeViewContext } from '../../internals/TreeViewProvider/useTreeViewContext';
+export const useTreeItem2Utils = ({
+  nodeId,
+  children
+}) => {
+  const {
+    instance,
+    selection: {
+      multiSelect
+    }
+  } = useTreeViewContext();
+  const status = {
+    expandable: Boolean(Array.isArray(children) ? children.length : children),
+    expanded: instance.isNodeExpanded(nodeId),
+    focused: instance.isNodeFocused(nodeId),
+    selected: instance.isNodeSelected(nodeId),
+    disabled: instance.isNodeDisabled(nodeId)
+  };
+  const handleExpansion = event => {
+    if (status.disabled) {
+      return;
+    }
+    if (!status.focused) {
+      instance.focusItem(event, nodeId);
+    }
+    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(nodeId))) {
+      instance.toggleNodeExpansion(event, nodeId);
+    }
+  };
+  const handleSelection = event => {
+    if (status.disabled) {
+      return;
+    }
+    if (!status.focused) {
+      instance.focusItem(event, nodeId);
+    }
+    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    if (multiple) {
+      if (event.shiftKey) {
+        instance.selectRange(event, {
+          end: nodeId
+        });
+      } else {
+        instance.selectNode(event, nodeId, true);
+      }
+    } else {
+      instance.selectNode(event, nodeId);
+    }
+  };
+  const interactions = {
+    handleExpansion,
+    handleSelection
+  };
+  return {
+    interactions,
+    status
+  };
+};

package/hooks/useTreeViewApiRef.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TreeViewAnyPluginSignature, TreeViewUsedPublicAPI } from '../internals/models';
+import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/models';
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  */
-export declare const useTreeViewApiRef: <T extends TreeViewAnyPluginSignature, Api extends TreeViewUsedPublicAPI<T>>() => React.MutableRefObject<Api>;
+export declare const useTreeViewApiRef: <TPlugins extends readonly TreeViewAnyPluginSignature[] = [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewNodesSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature]>() => React.MutableRefObject<TreeViewPublicAPI<TPlugins> | undefined>;

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.5
+ * @mui/x-tree-view v7.0.0-beta.7
  *
  * @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/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/helpers.d.ts

@@ -1,5 +1,6 @@
 import type { TreeViewAnyPluginSignature, TreeViewPlugin } from './plugin';
 export type DefaultizedProps<P extends {}, RequiredProps extends keyof P, AdditionalProps extends {} = {}> = Omit<P, RequiredProps | keyof AdditionalProps> & Required<Pick<P, RequiredProps>> & AdditionalProps;
+export type SlotComponentPropsFromProps<TProps extends {}, TOverrides extends {}, TOwnerState extends {}> = (Partial<TProps> & TOverrides) | ((ownerState: TOwnerState) => Partial<TProps> & TOverrides);
 type IsAny<T> = 0 extends 1 & T ? true : false;
 export type OptionalIfEmpty<A extends string, B> = keyof B extends never ? Partial<Record<A, B>> : IsAny<B> extends true ? Partial<Record<A, B>> : Record<A, B>;
 export type MergePluginsProperty<TPlugins extends readonly any[], TProperty extends keyof TreeViewAnyPluginSignature> = TPlugins extends readonly [plugin: infer P, ...otherPlugin: infer R] ? P extends TreeViewAnyPluginSignature ? P[TProperty] & MergePluginsProperty<R, TProperty> : {} : {};

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: {
+    nodeId: 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,46 @@ 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) => {
+    var _params$onExpandedIte;
+    (_params$onExpandedIte = params.onExpandedItemsChange) == null || _params$onExpandedIte.call(params, 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]);
+    return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(nodeId) !== -1 : false;
+  }, [models.expandedItems.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 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 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) {
+      if (params.onItemExpansionToggle) {
         diff.forEach(newlyExpandedNodeId => {
-          params.onNodeExpansionToggle(event, newlyExpandedNodeId, true);
+          params.onItemExpansionToggle(event, newlyExpandedNodeId, true);
         });
       }
-      setExpandedNodes(event, newExpanded);
+      setExpandedItems(event, newExpanded);
     }
   };
   populateInstance(instance, {
@@ -57,20 +57,20 @@ 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
+    defaultExpandedItems: (_params$defaultExpand = params.defaultExpandedItems) != null ? _params$defaultExpand : 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

@@ -9,35 +9,35 @@ export interface UseTreeViewExpansionInstance {
 }
 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];
 }>;

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -28,31 +28,31 @@ export const useTreeViewFocus = ({
     const node = instance.getNode(nodeId);
     return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
   };
-  const focusNode = useEventCallback((event, nodeId) => {
+  const focusItem = useEventCallback((event, nodeId) => {
     // if we receive a nodeId, and it is visible, the focus will be set to it
     if (nodeId && isNodeVisible(nodeId)) {
       if (!isTreeViewFocused()) {
         instance.focusRoot();
       }
       setFocusedNodeId(nodeId);
-      if (params.onNodeFocus) {
-        params.onNodeFocus(event, nodeId);
+      if (params.onItemFocus) {
+        params.onItemFocus(event, nodeId);
       }
     }
   });
   const focusDefaultNode = useEventCallback(event => {
     let nodeToFocusId;
-    if (Array.isArray(models.selectedNodes.value)) {
-      nodeToFocusId = models.selectedNodes.value.find(isNodeVisible);
-    } else if (models.selectedNodes.value != null && isNodeVisible(models.selectedNodes.value)) {
-      nodeToFocusId = models.selectedNodes.value;
+    if (Array.isArray(models.selectedItems.value)) {
+      nodeToFocusId = models.selectedItems.value.find(isNodeVisible);
+    } else if (models.selectedItems.value != null && isNodeVisible(models.selectedItems.value)) {
+      nodeToFocusId = models.selectedItems.value;
     }
     if (nodeToFocusId == null) {
       nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
     }
     setFocusedNodeId(nodeToFocusId);
-    if (params.onNodeFocus) {
-      params.onNodeFocus(event, nodeToFocusId);
+    if (params.onItemFocus) {
+      params.onItemFocus(event, nodeToFocusId);
     }
   });
   const focusRoot = useEventCallback(() => {
@@ -63,12 +63,12 @@ export const useTreeViewFocus = ({
   });
   populateInstance(instance, {
     isNodeFocused,
-    focusNode,
+    focusItem,
     focusRoot,
     focusDefaultNode
   });
   populatePublicAPI(publicAPI, {
-    focusNode
+    focusItem
   });
   useInstanceEventHandler(instance, 'removeNode', ({
     id
@@ -107,5 +107,5 @@ useTreeViewFocus.getInitialState = () => ({
   focusedNodeId: null
 });
 useTreeViewFocus.params = {
-  onNodeFocus: true
+  onItemFocus: true
 };