@mui/x-tree-view 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -3,6 +3,77 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.1.0
+
+_Mar 28, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Add `resizeThrottleMs` prop (#12556) @romgrk
+- 🌍 Improve Chinese (Hong Kong) (zh-HK) and Italian (it-IT) locale on the Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.1.0`
+
+- [DataGrid] Add `resizeThrottleMs` prop (#12556) @romgrk
+- [DataGrid] Do not publish `rowEditStop` event if row has fields with errors (#11383) @cherniavskii
+- [DataGrid] Fix bug in suspense (#12553) @romgrk
+- [DataGrid] Fix missing class name in the `GridToolbarQuickFilter` component (#12484) @jhawkins11
+
+#### `@mui/x-data-grid-pro@7.1.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.1.0`.
+
+#### `@mui/x-data-grid-premium@7.1.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.1.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.1.0`
+
+- [fields] Fix placeholder override (#12589) @flaviendelangle
+- [l10n] Improve Chinese (Hong Kong) (zh-HK) locale (#12547) @samchiu90
+- [l10n] Improve Italian (it-IT) locale (#12549) @antomanc
+- [pickers] Prepare compatibility with `@mui/zero-runtime` (stop using `ownerState` in `styled`) (#12003) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.1.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.1.0`, plus:
+
+- [DateRangePicker] Fix selection behavior with single input field when `readOnly` (#12593) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.1.0`
+
+- [charts] Fix tooltip causing crash on data change (#12571) @Rishi556
+
+### Tree View
+
+#### `@mui/x-tree-view@7.1.0`
+
+- [TreeView] Do not use outdated version of the state to compute new label first char in `RichTreeView` (#12512) @flaviendelangle
+
+### Docs
+
+- [docs] Add example to add a second icon next to the field's opening button (#12524) @flaviendelangle
+- [docs] Add missing note to Data Grid migration guide (#12557) @romgrk
+- [docs] Fix Charts title for SEO (#12545) @oliviertassinari
+- [docs] Fix small typo (#12558) @diogoparente
+- [docs] Improve codemod related documentation (#12582) @MBilalShafi
+- [docs] Reduce noise in migration docs side navigation (#12552) @cherniavskii
+- [docs] Sync static images from core repository (#12525) @LukasTy
+
+### Core
+
+- [core] Fix `l10n` script on Windows (#12550) @LukasTy
+- [core] Include `DateTimeRangePicker` tag in `releaseChangelog` (#12526) @LukasTy
+- [core] Upgrade monorepo (#12536) @cherniavskii
+
 ## v7.0.0
 
 _Mar 22, 2024_

package/RichTreeView/RichTreeView.js

@@ -104,8 +104,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 +117,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)
     }))
   });
 });

package/SimpleTreeView/SimpleTreeView.plugins.d.ts

@@ -1,6 +1,6 @@
 import { DefaultTreeViewPluginParameters, DefaultTreeViewPluginSlotProps, DefaultTreeViewPluginSlots } from '../internals/plugins/defaultPlugins';
 import { ConvertPluginsIntoSignatures } from '../internals/models';
-export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewIdSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewNodesSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewExpansionSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewSelectionSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewFocusSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewKeyboardNavigationSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewIconsSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewJSXNodes").UseTreeViewJSXNodesSignature>];
+export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewIdSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewItemsSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewExpansionSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewSelectionSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewFocusSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewKeyboardNavigationSignature>, import("../internals/models").TreeViewPlugin<import("../internals").UseTreeViewIconsSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewJSXItems").UseTreeViewJSXItemsSignature>];
 export type SimpleTreeViewPlugins = ConvertPluginsIntoSignatures<typeof SIMPLE_TREE_VIEW_PLUGINS>;
 export type SimpleTreeViewPluginSlots = DefaultTreeViewPluginSlots;
 export type SimpleTreeViewPluginSlotProps = DefaultTreeViewPluginSlotProps;

package/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/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/TreeItem/treeItemClasses.d.ts

@@ -13,7 +13,7 @@ export interface TreeItemClasses {
     focused: string;
     /** State class applied to the element when disabled. */
     disabled: string;
-    /** Styles applied to the tree node icon. */
+    /** Styles applied to the tree item icon. */
     iconContainer: string;
     /** Styles applied to the label element. */
     label: string;

package/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/TreeItem2Icon/TreeItem2Icon.types.d.ts

@@ -3,19 +3,19 @@ import { SlotComponentProps } from '@mui/base/utils';
 import { UseTreeItem2Status } from '../useTreeItem2';
 export interface TreeItem2IconSlots {
     /**
-     * The icon used to collapse the node.
+     * The icon used to collapse the item.
      */
     collapseIcon?: React.ElementType;
     /**
-     * The icon used to expand the node.
+     * The icon used to expand the item.
      */
     expandIcon?: React.ElementType;
     /**
-     * The icon displayed next to an end node.
+     * The icon displayed next to an end item.
      */
     endIcon?: React.ElementType;
     /**
-     * The icon to display next to the tree node's label.
+     * The icon to display next to the tree item's label.
      */
     icon?: React.ElementType;
 }

package/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/hooks/useTreeViewApiRef.d.ts

@@ -3,4 +3,4 @@ import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/mode
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  */
-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>;
+export declare const useTreeViewApiRef: <TPlugins extends readonly TreeViewAnyPluginSignature[] = [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature]>() => React.MutableRefObject<TreeViewPublicAPI<TPlugins> | undefined>;

package/index.js

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

package/internals/TreeViewProvider/DescendantProvider.d.ts

@@ -5,7 +5,7 @@ import * as React from 'react';
  * 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/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/internals/index.d.ts

@@ -10,6 +10,6 @@ export type { UseTreeViewFocusSignature } from './plugins/useTreeViewFocus';
 export type { UseTreeViewKeyboardNavigationSignature } from './plugins/useTreeViewKeyboardNavigation';
 export type { UseTreeViewIdSignature } from './plugins/useTreeViewId';
 export type { UseTreeViewIconsSignature } from './plugins/useTreeViewIcons';
-export type { UseTreeViewNodesSignature } from './plugins/useTreeViewNodes';
-export type { UseTreeViewJSXNodesSignature } from './plugins/useTreeViewJSXNodes';
+export type { UseTreeViewItemsSignature } from './plugins/useTreeViewItems';
+export type { UseTreeViewJSXItemsSignature } from './plugins/useTreeViewJSXItems';
 export { extractPluginParamsFromProps } from './utils/extractPluginParamsFromProps';

package/internals/plugins/defaultPlugins.d.ts

@@ -1,13 +1,13 @@
 import { UseTreeViewIdParameters } from './useTreeViewId';
-import { UseTreeViewNodesParameters } from './useTreeViewNodes';
+import { UseTreeViewItemsParameters } from './useTreeViewItems';
 import { UseTreeViewExpansionParameters } from './useTreeViewExpansion';
 import { UseTreeViewSelectionParameters } from './useTreeViewSelection';
 import { UseTreeViewFocusParameters } from './useTreeViewFocus';
 import { UseTreeViewIconsParameters } from './useTreeViewIcons';
 import { ConvertPluginsIntoSignatures, MergePluginsProperty } from '../models';
-export declare const DEFAULT_TREE_VIEW_PLUGINS: readonly [import("../models").TreeViewPlugin<import("./useTreeViewId").UseTreeViewIdSignature>, import("../models").TreeViewPlugin<import("./useTreeViewNodes").UseTreeViewNodesSignature>, import("../models").TreeViewPlugin<import("./useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewSelection").UseTreeViewSelectionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewFocus").UseTreeViewFocusSignature>, import("../models").TreeViewPlugin<import("./useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../models").TreeViewPlugin<import("./useTreeViewIcons").UseTreeViewIconsSignature>];
+export declare const DEFAULT_TREE_VIEW_PLUGINS: readonly [import("../models").TreeViewPlugin<import("./useTreeViewId").UseTreeViewIdSignature>, import("../models").TreeViewPlugin<import("./useTreeViewItems").UseTreeViewItemsSignature>, import("../models").TreeViewPlugin<import("./useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewSelection").UseTreeViewSelectionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewFocus").UseTreeViewFocusSignature>, import("../models").TreeViewPlugin<import("./useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../models").TreeViewPlugin<import("./useTreeViewIcons").UseTreeViewIconsSignature>];
 export type DefaultTreeViewPlugins = ConvertPluginsIntoSignatures<typeof DEFAULT_TREE_VIEW_PLUGINS>;
 export type DefaultTreeViewPluginSlots = MergePluginsProperty<DefaultTreeViewPlugins, 'slots'>;
 export type DefaultTreeViewPluginSlotProps = MergePluginsProperty<DefaultTreeViewPlugins, 'slotProps'>;
-export interface DefaultTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends UseTreeViewIdParameters, UseTreeViewNodesParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {
+export interface DefaultTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends UseTreeViewIdParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {
 }

package/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/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -11,11 +11,11 @@ export const useTreeViewExpansion = ({
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const isNodeExpanded = React.useCallback(itemId => {
+  const isItemExpanded = 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) => {
+  const isItemExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
+  const toggleItemExpansion = useEventCallback((event, itemId) => {
     if (itemId == null) {
       return;
     }
@@ -34,7 +34,7 @@ export const useTreeViewExpansion = ({
   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,9 +46,9 @@ export const useTreeViewExpansion = ({
     }
   };
   populateInstance(instance, {
-    isNodeExpanded,
-    isNodeExpandable,
-    toggleNodeExpansion,
+    isItemExpanded,
+    isItemExpandable,
+    toggleItemExpansion,
     expandAllSiblings
   });
 };
@@ -57,9 +57,9 @@ useTreeViewExpansion.models = {
     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,

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 export interface UseTreeViewExpansionInstance {
-    isNodeExpanded: (itemId: string) => boolean;
-    isNodeExpandable: (itemId: string) => boolean;
-    toggleNodeExpansion: (event: React.SyntheticEvent, value: string) => void;
+    isItemExpanded: (itemId: string) => boolean;
+    isItemExpandable: (itemId: string) => boolean;
+    toggleItemExpansion: (event: React.SyntheticEvent, value: string) => void;
     expandAllSiblings: (event: React.KeyboardEvent, itemId: string) => void;
 }
 export interface UseTreeViewExpansionParameters {
@@ -39,5 +39,5 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
     instance: UseTreeViewExpansionInstance;
     modelNames: 'expandedItems';
-    dependantPlugins: [UseTreeViewNodesSignature];
+    dependantPlugins: [UseTreeViewItemsSignature];
 }>;

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -8,7 +8,7 @@ import { getActiveElement } from '../../utils/utils';
 const useTabbableItemId = (instance, selectedItems) => {
   const isItemVisible = itemId => {
     const node = instance.getNode(itemId);
-    return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+    return node && (node.parentId == null || instance.isItemExpanded(node.parentId));
   };
   let tabbableItemId;
   if (Array.isArray(selectedItems)) {
@@ -32,18 +32,18 @@ export const useTreeViewFocus = ({
 }) => {
   const tabbableItemId = useTabbableItemId(instance, models.selectedItems.value);
   const setFocusedItemId = useEventCallback(itemId => {
-    const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedNodeId) : itemId;
-    if (state.focusedNodeId !== cleanItemId) {
+    const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedItemId) : itemId;
+    if (state.focusedItemId !== cleanItemId) {
       setState(prevState => _extends({}, prevState, {
-        focusedNodeId: cleanItemId
+        focusedItemId: cleanItemId
       }));
     }
   });
   const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains(getActiveElement(ownerDocument(rootRef.current))), [rootRef]);
-  const isNodeFocused = React.useCallback(itemId => state.focusedNodeId === itemId && isTreeViewFocused(), [state.focusedNodeId, isTreeViewFocused]);
-  const isNodeVisible = itemId => {
+  const isItemFocused = React.useCallback(itemId => state.focusedItemId === itemId && isTreeViewFocused(), [state.focusedItemId, isTreeViewFocused]);
+  const isItemVisible = itemId => {
     const node = instance.getNode(itemId);
-    return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+    return node && (node.parentId == null || instance.isItemExpanded(node.parentId));
   };
   const innerFocusItem = (event, itemId) => {
     const node = instance.getNode(itemId);
@@ -56,62 +56,64 @@ export const useTreeViewFocus = ({
       params.onItemFocus(event, itemId);
     }
   };
-  const focusItem = useEventCallback((event, nodeId) => {
-    // If we receive a nodeId, and it is visible, the focus will be set to it
-    if (isNodeVisible(nodeId)) {
-      innerFocusItem(event, nodeId);
+  const focusItem = useEventCallback((event, itemId) => {
+    // If we receive an itemId, and it is visible, the focus will be set to it
+    if (isItemVisible(itemId)) {
+      innerFocusItem(event, itemId);
     }
   });
-  const focusDefaultNode = useEventCallback(event => {
-    let nodeToFocusId;
+  const focusDefaultItem = useEventCallback(event => {
+    let itemToFocusId;
     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;
+      itemToFocusId = models.selectedItems.value.find(isItemVisible);
+    } else if (models.selectedItems.value != null && isItemVisible(models.selectedItems.value)) {
+      itemToFocusId = models.selectedItems.value;
     }
-    if (nodeToFocusId == null) {
-      nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+    if (itemToFocusId == null) {
+      itemToFocusId = instance.getNavigableChildrenIds(null)[0];
     }
-    innerFocusItem(event, nodeToFocusId);
+    innerFocusItem(event, itemToFocusId);
   });
   const removeFocusedItem = useEventCallback(() => {
-    if (state.focusedNodeId == null) {
+    if (state.focusedItemId == null) {
       return;
     }
-    const node = instance.getNode(state.focusedNodeId);
-    const itemElement = document.getElementById(instance.getTreeItemId(state.focusedNodeId, node.idAttribute));
-    if (itemElement) {
-      itemElement.blur();
+    const node = instance.getNode(state.focusedItemId);
+    if (node) {
+      const itemElement = document.getElementById(instance.getTreeItemId(state.focusedItemId, node.idAttribute));
+      if (itemElement) {
+        itemElement.blur();
+      }
     }
     setFocusedItemId(null);
   });
   const canItemBeTabbed = itemId => itemId === tabbableItemId;
   populateInstance(instance, {
-    isNodeFocused,
+    isItemFocused,
     canItemBeTabbed,
     focusItem,
-    focusDefaultNode,
+    focusDefaultItem,
     removeFocusedItem
   });
   populatePublicAPI(publicAPI, {
     focusItem
   });
-  useInstanceEventHandler(instance, 'removeNode', ({
+  useInstanceEventHandler(instance, 'removeItem', ({
     id
   }) => {
-    if (state.focusedNodeId === id) {
-      instance.focusDefaultNode(null);
+    if (state.focusedItemId === id) {
+      instance.focusDefaultItem(null);
     }
   });
   const createHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
-      instance.focusDefaultNode(event);
+      instance.focusDefaultItem(event);
     }
   };
-  const focusedNode = instance.getNode(state.focusedNodeId);
-  const activeDescendant = focusedNode ? instance.getTreeItemId(focusedNode.id, focusedNode.idAttribute) : null;
+  const focusedItem = instance.getNode(state.focusedItemId);
+  const activeDescendant = focusedItem ? instance.getTreeItemId(focusedItem.id, focusedItem.idAttribute) : null;
   return {
     getRootProps: otherHandlers => ({
       onFocus: createHandleFocus(otherHandlers),
@@ -120,7 +122,7 @@ export const useTreeViewFocus = ({
   };
 };
 useTreeViewFocus.getInitialState = () => ({
-  focusedNodeId: null
+  focusedItemId: null
 });
 useTreeViewFocus.params = {
   onItemFocus: true

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewIdSignature } from '../useTreeViewId/useTreeViewId.types';
-import type { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import type { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 export interface UseTreeViewFocusInstance {
-    isNodeFocused: (itemId: string) => boolean;
+    isItemFocused: (itemId: string) => boolean;
     canItemBeTabbed: (itemId: string) => boolean;
-    focusItem: (event: React.SyntheticEvent, nodeId: string) => void;
-    focusDefaultNode: (event: React.SyntheticEvent | null) => void;
+    focusItem: (event: React.SyntheticEvent, itemId: string) => void;
+    focusDefaultItem: (event: React.SyntheticEvent | null) => void;
     removeFocusedItem: () => void;
 }
 export interface UseTreeViewFocusPublicAPI extends Pick<UseTreeViewFocusInstance, 'focusItem'> {
@@ -24,7 +24,7 @@ export interface UseTreeViewFocusParameters {
 }
 export type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;
 export interface UseTreeViewFocusState {
-    focusedNodeId: string | null;
+    focusedItemId: string | null;
 }
 export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
     params: UseTreeViewFocusParameters;
@@ -34,7 +34,7 @@ export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
     state: UseTreeViewFocusState;
     dependantPlugins: [
         UseTreeViewIdSignature,
-        UseTreeViewNodesSignature,
+        UseTreeViewItemsSignature,
         UseTreeViewSelectionSignature,
         UseTreeViewExpansionSignature
     ];

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

@@ -1,23 +1,23 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import { TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 export interface UseTreeViewIconsParameters {
 }
 export type UseTreeViewIconsDefaultizedParameters = UseTreeViewIconsParameters;
 interface UseTreeViewIconsSlots {
     /**
-     * The default icon used to collapse the node.
+     * The default icon used to collapse the item.
      */
     collapseIcon?: React.ElementType;
     /**
-     * The default icon used to expand the node.
+     * The default icon used to expand the item.
      */
     expandIcon?: React.ElementType;
     /**
-     * The default icon displayed next to an end node.
-     * This is applied to all tree nodes and can be overridden by the TreeItem `icon` slot prop.
+     * The default icon displayed next to an end item.
+     * This is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.
      */
     endIcon?: React.ElementType;
 }
@@ -38,6 +38,6 @@ export type UseTreeViewIconsSignature = TreeViewPluginSignature<{
     contextValue: UseTreeViewIconsContextValue;
     slots: UseTreeViewIconsSlots;
     slotProps: UseTreeViewIconsSlotProps;
-    dependantPlugins: [UseTreeViewNodesSignature, UseTreeViewSelectionSignature];
+    dependantPlugins: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
 }>;
 export {};

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

@@ -11,7 +11,7 @@ export interface UseTreeViewIdParameters {
 }
 export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
 export interface UseTreeViewIdState {
-    focusedNodeId: string | null;
+    focusedItemId: string | null;
 }
 export type UseTreeViewIdSignature = TreeViewPluginSignature<{
     params: UseTreeViewIdParameters;

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

@@ -0,0 +1,2 @@
+export { useTreeViewItems } from './useTreeViewItems';
+export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, } from './useTreeViewItems.types';

package/internals/plugins/useTreeViewItems/index.js

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