@mui/x-tree-view 7.1.1 → 7.2.0

package/CHANGELOG.md

@@ -3,6 +3,92 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.2.0
+
+_Apr 12, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Make grid colors customizable through the MUI themes API
+- 🌍 Improve French (fr-FR), German (de-DE), and Swedish (sv-SE) locales on the Data Grid and Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.2.0`
+
+- [DataGrid] Add missing `api` property to `GridCallbackDetails` (#12742) @sai6855
+- [DataGrid] Do not escape double quotes when copying to clipboard (#12722) @cherniavskii
+- [DataGrid] Fix column vertical border (#12741) @romgrk
+- [DataGrid] Fix invalid date error when filtering `date`/`dateTime` columns (#12709) @cherniavskii
+- [DataGrid] Fix overflow with dynamic row height (#12683) @romgrk
+- [DataGrid] Make colors customizable (#12614) @romgrk
+- [l10n] Improve French (fr-FR) locale (#12755) @derek-0000
+- [l10n] Improve German (de-DE) locale (#12752) @Jens-Schoen
+- [l10n] Improve Swedish (sv-SE) locale (#12731) @pontusdacke
+
+#### `@mui/x-data-grid-pro@7.2.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.2.0`.
+
+#### `@mui/x-data-grid-premium@7.2.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.2.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste not working when cell loses focus (#12724) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.2.0`
+
+- [fields] Fix field editing after closing the picker (#12675) @LukasTy
+- [l10n] Improve French (fr-FR) locale (#12692) @FaroukBel
+- [l10n] Improve German (de-DE) locale (#12752) @Jens-Schoen
+- [l10n] Improve Swedish (sv-SE) locale (#12731) @pontusdacke
+- [pickers] Fix desktop date time Pickers grid layout (#12748) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.2.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.2.0`, plus:
+
+- [DateTimeRangePicker] Fix desktop toolbar style (#12760) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.2.0`
+
+- [charts] Fix Bar chart with empty dataset throwing an error (#12708) @JCQuintas
+- [charts] Fix `tickLabelInterval` not working on `YAxis` (#12746) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.2.0`
+
+- [TreeView] Add a new lookup to access an item index without expansive computation (#12729) @flaviendelangle
+- [TreeView] Clean up usage of term "node" in internals (#12655) @noraleonte
+- [TreeView] Improve performance by removing `getNavigableChildrenIds` method (#12713) @flaviendelangle
+- [TreeView] Remove `state.items.itemTree` (#12717) @flaviendelangle
+- [TreeView] Remove remaining occurences of the word "node" in the codebase (#12712) @flaviendelangle
+- [TreeView] Return `instance` and `publicAPI` methods from plugin and populate the main objects inside `useTreeView` (#12650) @flaviendelangle
+- [TreeView] Fix behaviors when the item order changes (#12369) @flaviendelangle
+
+### Docs
+
+- [docs] Add `AxisFormatter` documentation for customizing tick/tooltip value formatting (#12700) @JCQuintas
+- [docs] Add file explorer example to rich tree view customization docs (#12707) @noraleonte
+- [docs] Do not use import of depth 3 in the doc (#12716) @flaviendelangle
+- [docs] Explain how to clip plots with composition (#12679) @alexfauquette
+- [docs] Fix typo in Data Grid v7 migration page (#12720) @bfaulk96
+- [docs] Fix typo in Pickers v7 migration page (#12721) @bfaulk96
+
+### Core
+
+- [core] Support multiple resolved `l10n` PR packages (#12735) @LukasTy
+- [core] Update Netlify release references in release README (#12687) @LukasTy
+- [core] Use `describeTreeView` for icons tests (#12672) @flaviendelangle
+- [core] Use `describeTreeView` in existing tests for `useTreeViewItems` (#12732) @flaviendelangle
+
 ## 7.1.1
 
 _Apr 5, 2024_

package/RichTreeView/RichTreeView.types.d.ts

@@ -4,10 +4,10 @@ import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base/utils';
 import { RichTreeViewClasses } from './richTreeViewClasses';
 import { DefaultTreeViewPluginParameters, DefaultTreeViewPluginSlotProps, DefaultTreeViewPluginSlots, DefaultTreeViewPlugins } from '../internals/plugins/defaultPlugins';
-import { TreeItem, TreeItemProps } from '../TreeItem';
+import { TreeItemProps } from '../TreeItem';
 import { TreeItem2Props } from '../TreeItem2';
 import { TreeViewItemId } from '../models';
-import { TreeViewPublicAPI } from '../internals/models';
+import { SlotComponentPropsFromProps, TreeViewPublicAPI } from '../internals/models';
 interface RichTreeViewItemSlotOwnerState {
     itemId: TreeViewItemId;
     label: string;
@@ -26,7 +26,7 @@ export interface RichTreeViewSlots extends DefaultTreeViewPluginSlots {
 }
 export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends DefaultTreeViewPluginSlotProps {
     root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
-    item?: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemSlotOwnerState>;
+    item?: SlotComponentPropsFromProps<TreeItemProps | TreeItem2Props, {}, RichTreeViewItemSlotOwnerState>;
 }
 export type RichTreeViewApiRef = React.MutableRefObject<TreeViewPublicAPI<DefaultTreeViewPlugins> | undefined>;
 export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {

package/TreeItem/TreeItem.js

@@ -270,7 +270,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     onKeyDown?.(event);
     instance.handleItemKeyDown(event, itemId);
   };
-  const idAttribute = instance.getTreeItemId(itemId, id);
+  const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   return /*#__PURE__*/_jsx(TreeItem2Provider, {
     itemId: itemId,

package/TreeItem2/TreeItem2.d.ts

@@ -5,6 +5,9 @@ export declare const TreeItem2Content: import("@emotion/styled").StyledComponent
 export declare const TreeItem2Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const TreeItem2IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const TreeItem2GroupTransition: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Collapse").CollapseProps, keyof import("@mui/material/Collapse").CollapseProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+type TreeItem2Component = ((props: TreeItem2Props & React.RefAttributes<HTMLLIElement>) => React.JSX.Element) & {
+    propTypes?: any;
+};
 /**
  *
  * Demos:
@@ -15,4 +18,5 @@ export declare const TreeItem2GroupTransition: import("@emotion/styled").StyledC
  *
  * - [TreeItem2 API](https://mui.com/x/api/tree-view/tree-item-2/)
  */
-export declare const TreeItem2: React.ForwardRefExoticComponent<TreeItem2Props & React.RefAttributes<HTMLLIElement>>;
+export declare const TreeItem2: TreeItem2Component;
+export {};

package/TreeItem2/TreeItem2.js

@@ -147,7 +147,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getTreeItemUtilityClass, classes);
 };
-
 /**
  *
  * Demos:

package/index.js

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

package/internals/TreeViewProvider/TreeViewChildrenItemProvider.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export declare const TreeViewChildrenItemContext: React.Context<TreeViewChildrenItemContextValue | null>;
+interface TreeViewChildrenItemProviderProps {
+    itemId?: string;
+    children: React.ReactNode;
+}
+export declare function TreeViewChildrenItemProvider(props: TreeViewChildrenItemProviderProps): React.JSX.Element;
+export declare namespace TreeViewChildrenItemProvider {
+    var propTypes: any;
+}
+interface TreeViewChildrenItemContextValue {
+    registerChild: (idAttribute: string, itemId: string) => void;
+    unregisterChild: (idAttribute: string) => void;
+    parentId: string | null;
+}
+export {};

package/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTreeViewContext } from './useTreeViewContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  TreeViewChildrenItemContext.displayName = 'TreeViewChildrenItemContext';
+}
+export function TreeViewChildrenItemProvider(props) {
+  const {
+    children,
+    itemId = null
+  } = props;
+  const {
+    instance,
+    rootRef
+  } = useTreeViewContext();
+  const childrenIdAttrToIdRef = React.useRef(new Map());
+  React.useEffect(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    let idAttr = null;
+    if (itemId == null) {
+      idAttr = rootRef.current.id;
+    } else {
+      // Undefined during 1st render
+      const itemMeta = instance.getItemMeta(itemId);
+      if (itemMeta !== undefined) {
+        idAttr = instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute);
+      }
+    }
+    if (idAttr == null) {
+      return;
+    }
+    const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
+    const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${idAttr}"] `}[role="treeitem"]:not(*[id="${idAttr}"] [role="treeitem"] [role="treeitem"])`);
+    const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
+    const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);
+    if (hasChanged) {
+      instance.setJSXItemsOrderedChildrenIds(itemId ?? null, childrenIds);
+    }
+  });
+  const value = React.useMemo(() => ({
+    registerChild: (childIdAttribute, childItemId) => childrenIdAttrToIdRef.current.set(childIdAttribute, childItemId),
+    unregisterChild: childIdAttribute => childrenIdAttrToIdRef.current.delete(childIdAttribute),
+    parentId: itemId
+  }), [itemId]);
+  return /*#__PURE__*/_jsx(TreeViewChildrenItemContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? TreeViewChildrenItemProvider.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.string
+} : void 0;

package/internals/TreeViewProvider/TreeViewContext.d.ts

@@ -5,6 +5,8 @@ import * as React from 'react';
 export declare const TreeViewContext: React.Context<{
     instance: {};
     publicAPI: {};
+    rootRef: React.RefObject<HTMLUListElement>;
     wrapItem: import("../models").TreeItemWrapper;
+    wrapRoot: import("../models").TreeRootWrapper;
     runItemPlugins: <TProps extends {}>(props: TProps) => Required<import("../models").TreeViewItemPluginResponse>;
 } | null>;

package/internals/TreeViewProvider/TreeViewProvider.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { TreeViewContext } from './TreeViewContext';
-import { DescendantProvider } from './DescendantProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Sets up the contexts for the underlying TreeItem components.
@@ -14,8 +13,8 @@ export function TreeViewProvider(props) {
   } = props;
   return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
     value: value,
-    children: /*#__PURE__*/_jsx(DescendantProvider, {
-      children: children
+    children: value.wrapRoot({
+      children
     })
   });
 }

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

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

package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import { EventManager } from '../../utils/EventManager';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
 };
-export const useTreeViewInstanceEvents = ({
-  instance
-}) => {
+export const useTreeViewInstanceEvents = () => {
   const [eventManager] = React.useState(() => new EventManager());
   const publishEvent = React.useCallback((...args) => {
     const [name, params, event = {}] = args;
@@ -22,9 +19,11 @@ export const useTreeViewInstanceEvents = ({
       eventManager.removeListener(event, handler);
     };
   }, [eventManager]);
-  populateInstance(instance, {
-    $$publishEvent: publishEvent,
-    $$subscribeEvent: subscribeEvent
-  });
+  return {
+    instance: {
+      $$publishEvent: publishEvent,
+      $$subscribeEvent: subscribeEvent
+    }
+  };
 };
 useTreeViewInstanceEvents.params = {};

package/internals/models/plugin.d.ts

@@ -7,7 +7,6 @@ import type { TreeViewCorePluginsSignature } from '../corePlugins';
 import { TreeViewItemId } from '../../models';
 export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSignature> {
     instance: TreeViewUsedInstance<TSignature>;
-    publicAPI: TreeViewUsedPublicAPI<TSignature>;
     params: TreeViewUsedDefaultizedParams<TSignature>;
     state: TreeViewUsedState<TSignature>;
     slots: TSignature['slots'];
@@ -23,7 +22,7 @@ type TreeViewModelsInitializer<TSignature extends TreeViewAnyPluginSignature> =
 };
 type TreeViewResponse<TSignature extends TreeViewAnyPluginSignature> = {
     getRootProps?: <TOther extends EventHandlers = {}>(otherHandlers: TOther) => React.HTMLAttributes<HTMLUListElement>;
-} & OptionalIfEmpty<'contextValue', TSignature['contextValue']>;
+} & OptionalIfEmpty<'publicAPI', TSignature['publicAPI']> & OptionalIfEmpty<'instance', TSignature['instance']> & OptionalIfEmpty<'contextValue', TSignature['contextValue']>;
 export type TreeViewPluginSignature<T extends {
     params?: {};
     defaultizedParams?: {};
@@ -135,8 +134,11 @@ export type TreeItemWrapper = (params: {
     itemId: TreeViewItemId;
     children: React.ReactNode;
 }) => React.ReactNode;
+export type TreeRootWrapper = (params: {
+    children: React.ReactNode;
+}) => React.ReactNode;
 export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
-    (options: TreeViewPluginOptions<TSignature>): void | TreeViewResponse<TSignature>;
+    (options: TreeViewPluginOptions<TSignature>): TreeViewResponse<TSignature>;
     getDefaultizedParams?: (params: TreeViewUsedParams<TSignature>) => TSignature['defaultizedParams'];
     getInitialState?: (params: TreeViewUsedDefaultizedParams<TSignature>) => TSignature['state'];
     models?: TreeViewModelsInitializer<TSignature>;
@@ -144,9 +146,15 @@ export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
     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.
+     * @param {{ nodeId: TreeViewItemId; children: React.ReactNode; }} params The params of the item.
+     * @returns {React.ReactNode} The wrapped item.
      */
     wrapItem?: TreeItemWrapper;
+    /**
+     * Render function used to add React wrappers around the TreeView.
+     * @param {{ children: React.ReactNode; }} params The params of the root.
+     * @returns {React.ReactNode} The wrapped root.
+     */
+    wrapRoot?: TreeRootWrapper;
 };
 export {};

package/internals/models/treeView.d.ts

@@ -1,9 +1,8 @@
 import type { TreeViewAnyPluginSignature } from './plugin';
 import type { MergePluginsProperty } from './helpers';
-export interface TreeViewNode {
+export interface TreeViewItemMeta {
     id: string;
     idAttribute: string | undefined;
-    index: number;
     parentId: string | null;
     expandable: boolean;
     disabled: boolean;

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -1,10 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 export const useTreeViewExpansion = ({
   instance,
-  publicAPI,
   params,
   models
 }) => {
@@ -20,7 +18,7 @@ export const useTreeViewExpansion = ({
     models.expandedItems.setControlledValue(value);
   };
   const isItemExpanded = React.useCallback(itemId => expandedItemsMap.has(itemId), [expandedItemsMap]);
-  const isItemExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
+  const isItemExpandable = React.useCallback(itemId => !!instance.getItemMeta(itemId)?.expandable, [instance]);
   const toggleItemExpansion = useEventCallback((event, itemId) => {
     const isExpandedBefore = instance.isItemExpanded(itemId);
     instance.setItemExpansion(event, itemId, !isExpandedBefore);
@@ -42,8 +40,8 @@ export const useTreeViewExpansion = ({
     setExpandedItems(event, newExpanded);
   });
   const expandAllSiblings = (event, itemId) => {
-    const node = instance.getNode(itemId);
-    const siblings = instance.getChildrenIds(node.parentId);
+    const itemMeta = instance.getItemMeta(itemId);
+    const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
     const diff = siblings.filter(child => instance.isItemExpandable(child) && !instance.isItemExpanded(child));
     const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
@@ -55,16 +53,18 @@ export const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
-  populateInstance(instance, {
-    isItemExpanded,
-    isItemExpandable,
-    setItemExpansion,
-    toggleItemExpansion,
-    expandAllSiblings
-  });
-  populatePublicAPI(publicAPI, {
-    setItemExpansion
-  });
+  return {
+    publicAPI: {
+      setItemExpansion
+    },
+    instance: {
+      isItemExpanded,
+      isItemExpandable,
+      setItemExpansion,
+      toggleItemExpansion,
+      expandAllSiblings
+    }
+  };
 };
 useTreeViewExpansion.models = {
   expandedItems: {

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import ownerDocument from '@mui/utils/ownerDocument';
-import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
 import { getActiveElement } from '../../utils/utils';
+import { getFirstNavigableItem } from '../../utils/tree';
 const useTabbableItemId = (instance, selectedItems) => {
   const isItemVisible = itemId => {
-    const node = instance.getNode(itemId);
-    return node && (node.parentId == null || instance.isItemExpanded(node.parentId));
+    const itemMeta = instance.getItemMeta(itemId);
+    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
   };
   let tabbableItemId;
   if (Array.isArray(selectedItems)) {
@@ -17,13 +17,12 @@ const useTabbableItemId = (instance, selectedItems) => {
     tabbableItemId = selectedItems;
   }
   if (tabbableItemId == null) {
-    tabbableItemId = instance.getNavigableChildrenIds(null)[0];
+    tabbableItemId = getFirstNavigableItem(instance);
   }
   return tabbableItemId;
 };
 export const useTreeViewFocus = ({
   instance,
-  publicAPI,
   params,
   state,
   setState,
@@ -42,12 +41,12 @@ export const useTreeViewFocus = ({
   const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains(getActiveElement(ownerDocument(rootRef.current))), [rootRef]);
   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.isItemExpanded(node.parentId));
+    const itemMeta = instance.getItemMeta(itemId);
+    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
   };
   const innerFocusItem = (event, itemId) => {
-    const node = instance.getNode(itemId);
-    const itemElement = document.getElementById(instance.getTreeItemId(itemId, node.idAttribute));
+    const itemMeta = instance.getItemMeta(itemId);
+    const itemElement = document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
     if (itemElement) {
       itemElement.focus();
     }
@@ -70,7 +69,7 @@ export const useTreeViewFocus = ({
       itemToFocusId = models.selectedItems.value;
     }
     if (itemToFocusId == null) {
-      itemToFocusId = instance.getNavigableChildrenIds(null)[0];
+      itemToFocusId = getFirstNavigableItem(instance);
     }
     innerFocusItem(event, itemToFocusId);
   });
@@ -78,9 +77,9 @@ export const useTreeViewFocus = ({
     if (state.focusedItemId == null) {
       return;
     }
-    const node = instance.getNode(state.focusedItemId);
-    if (node) {
-      const itemElement = document.getElementById(instance.getTreeItemId(state.focusedItemId, node.idAttribute));
+    const itemMeta = instance.getItemMeta(state.focusedItemId);
+    if (itemMeta) {
+      const itemElement = document.getElementById(instance.getTreeItemIdAttribute(state.focusedItemId, itemMeta.idAttribute));
       if (itemElement) {
         itemElement.blur();
       }
@@ -88,16 +87,6 @@ export const useTreeViewFocus = ({
     setFocusedItemId(null);
   });
   const canItemBeTabbed = itemId => itemId === tabbableItemId;
-  populateInstance(instance, {
-    isItemFocused,
-    canItemBeTabbed,
-    focusItem,
-    focusDefaultItem,
-    removeFocusedItem
-  });
-  populatePublicAPI(publicAPI, {
-    focusItem
-  });
   useInstanceEventHandler(instance, 'removeItem', ({
     id
   }) => {
@@ -112,13 +101,23 @@ export const useTreeViewFocus = ({
       instance.focusDefaultItem(event);
     }
   };
-  const focusedItem = instance.getNode(state.focusedItemId);
-  const activeDescendant = focusedItem ? instance.getTreeItemId(focusedItem.id, focusedItem.idAttribute) : null;
+  const focusedItem = instance.getItemMeta(state.focusedItemId);
+  const activeDescendant = focusedItem ? instance.getTreeItemIdAttribute(focusedItem.id, focusedItem.idAttribute) : null;
   return {
     getRootProps: otherHandlers => ({
       onFocus: createHandleFocus(otherHandlers),
       'aria-activedescendant': activeDescendant ?? undefined
-    })
+    }),
+    publicAPI: {
+      focusItem
+    },
+    instance: {
+      isItemFocused,
+      canItemBeTabbed,
+      focusItem,
+      focusDefaultItem,
+      removeFocusedItem
+    }
   };
 };
 useTreeViewFocus.getInitialState = () => ({

package/internals/plugins/useTreeViewId/useTreeViewId.js

@@ -1,19 +1,17 @@
 import * as React from 'react';
 import useId from '@mui/utils/useId';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
 export const useTreeViewId = ({
-  instance,
   params
 }) => {
   const treeId = useId(params.id);
-  const getTreeItemId = React.useCallback((itemId, idAttribute) => idAttribute ?? `${treeId}-${itemId}`, [treeId]);
-  populateInstance(instance, {
-    getTreeItemId
-  });
+  const getTreeItemIdAttribute = React.useCallback((itemId, idAttribute) => idAttribute ?? `${treeId}-${itemId}`, [treeId]);
   return {
     getRootProps: () => ({
       id: treeId
-    })
+    }),
+    instance: {
+      getTreeItemIdAttribute
+    }
   };
 };
 useTreeViewId.params = {

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

@@ -1,6 +1,6 @@
 import { TreeViewPluginSignature } from '../../models';
 export interface UseTreeViewIdInstance {
-    getTreeItemId: (itemId: string, idAttribute: string | undefined) => string;
+    getTreeItemIdAttribute: (itemId: string, idAttribute: string | undefined) => string;
 }
 export interface UseTreeViewIdParameters {
     /**