@mui/x-tree-view 7.1.0 → 7.2.0

package/internals/index.js

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

package/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?: {};
@@ -97,7 +96,7 @@ type TreeViewUsedPlugins<TSignature extends TreeViewAnyPluginSignature> = [
     TreeViewCorePluginsSignature,
     ...TSignature['dependantPlugins']
 ];
-type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['params'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'params'>;
+export type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['params'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'params'>;
 type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['defaultizedParams'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'defaultizedParams'>;
 export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature> = TSignature['instance'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'instance'> & {
     /**
@@ -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,39 +1,47 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
 export const useTreeViewExpansion = ({
   instance,
   params,
   models
 }) => {
+  const expandedItemsMap = React.useMemo(() => {
+    const temp = new Map();
+    models.expandedItems.value.forEach(id => {
+      temp.set(id, true);
+    });
+    return temp;
+  }, [models.expandedItems.value]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const isItemExpanded = React.useCallback(itemId => {
-    return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(itemId) !== -1 : false;
-  }, [models.expandedItems.value]);
-  const isItemExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
+  const isItemExpanded = React.useCallback(itemId => expandedItemsMap.has(itemId), [expandedItemsMap]);
+  const isItemExpandable = React.useCallback(itemId => !!instance.getItemMeta(itemId)?.expandable, [instance]);
   const toggleItemExpansion = useEventCallback((event, itemId) => {
-    if (itemId == null) {
+    const isExpandedBefore = instance.isItemExpanded(itemId);
+    instance.setItemExpansion(event, itemId, !isExpandedBefore);
+  });
+  const setItemExpansion = useEventCallback((event, itemId, isExpanded) => {
+    const isExpandedBefore = instance.isItemExpanded(itemId);
+    if (isExpandedBefore === isExpanded) {
       return;
     }
-    const isExpandedBefore = models.expandedItems.value.indexOf(itemId) !== -1;
     let newExpanded;
-    if (isExpandedBefore) {
-      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
-    } else {
+    if (isExpanded) {
       newExpanded = [itemId].concat(models.expandedItems.value);
+    } else {
+      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
     }
     if (params.onItemExpansionToggle) {
-      params.onItemExpansionToggle(event, itemId, !isExpandedBefore);
+      params.onItemExpansionToggle(event, itemId, isExpanded);
     }
     setExpandedItems(event, newExpanded);
   });
   const expandAllSiblings = (event, itemId) => {
-    const node = instance.getNode(itemId);
-    const siblings = instance.getChildrenIds(node.parentId);
+    const 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) {
@@ -45,12 +53,18 @@ export const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
-  populateInstance(instance, {
-    isItemExpanded,
-    isItemExpandable,
-    toggleItemExpansion,
-    expandAllSiblings
-  });
+  return {
+    publicAPI: {
+      setItemExpansion
+    },
+    instance: {
+      isItemExpanded,
+      isItemExpandable,
+      setItemExpansion,
+      toggleItemExpansion,
+      expandAllSiblings
+    }
+  };
 };
 useTreeViewExpansion.models = {
   expandedItems: {

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

@@ -1,10 +1,19 @@
 import * as React from 'react';
 import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
-export interface UseTreeViewExpansionInstance {
+export interface UseTreeViewExpansionPublicAPI {
+    /**
+     * Change the expansion status of a given item.
+     * @param {React.SyntheticEvent} event The UI event that triggered the change.
+     * @param {string} itemId The id of the item to modify.
+     * @param {boolean} isExpanded The new expansion status of the given item.
+     */
+    setItemExpansion: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
+}
+export interface UseTreeViewExpansionInstance extends UseTreeViewExpansionPublicAPI {
     isItemExpanded: (itemId: string) => boolean;
     isItemExpandable: (itemId: string) => boolean;
-    toggleItemExpansion: (event: React.SyntheticEvent, value: string) => void;
+    toggleItemExpansion: (event: React.SyntheticEvent, itemId: string) => void;
     expandAllSiblings: (event: React.KeyboardEvent, itemId: string) => void;
 }
 export interface UseTreeViewExpansionParameters {
@@ -38,6 +47,7 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     params: UseTreeViewExpansionParameters;
     defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
     instance: UseTreeViewExpansionInstance;
+    publicAPI: UseTreeViewExpansionPublicAPI;
     modelNames: 'expandedItems';
     dependantPlugins: [UseTreeViewItemsSignature];
 }>;

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

@@ -4,15 +4,23 @@ import { UseTreeViewIdSignature } from '../useTreeViewId/useTreeViewId.types';
 import type { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
-export interface UseTreeViewFocusInstance {
+export interface UseTreeViewFocusPublicAPI {
+    /**
+     * Focuses the item with the given id.
+     *
+     * If the item is the child of a collapsed item, then this method will do nothing.
+     * Make sure to expand the ancestors of the item before calling this method if needed.
+     * @param {React.SyntheticEvent} event The event source of the action.
+     * @param {string} itemId The id of the item to focus.
+     */
+    focusItem: (event: React.SyntheticEvent, itemId: string) => void;
+}
+export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
     isItemFocused: (itemId: string) => boolean;
     canItemBeTabbed: (itemId: string) => boolean;
-    focusItem: (event: React.SyntheticEvent, itemId: string) => void;
     focusDefaultItem: (event: React.SyntheticEvent | null) => void;
     removeFocusedItem: () => void;
 }
-export interface UseTreeViewFocusPublicAPI extends Pick<UseTreeViewFocusInstance, 'focusItem'> {
-}
 export interface UseTreeViewFocusParameters {
     /**
      * Callback fired when tree items are focused.

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 {
     /**

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -1,86 +1,98 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';
 const updateItemsState = ({
   items,
   isItemDisabled,
   getItemLabel,
   getItemId
 }) => {
-  const nodeMap = {};
+  const itemMetaMap = {};
   const itemMap = {};
-  const processItem = (item, index, parentId) => {
+  const itemOrderedChildrenIds = {
+    [TREE_VIEW_ROOT_PARENT_ID]: []
+  };
+  const processItem = (item, parentId) => {
     const id = getItemId ? getItemId(item) : item.id;
     if (id == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
-    if (nodeMap[id] != null) {
-      throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Tow items were provided with the same id in the \`items\` prop: "${id}"`].join('\n'));
+    if (itemMetaMap[id] != null) {
+      throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${id}"`].join('\n'));
     }
     const label = getItemLabel ? getItemLabel(item) : item.label;
     if (label == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
-    nodeMap[id] = {
+    itemMetaMap[id] = {
       id,
       label,
-      index,
       parentId,
       idAttribute: undefined,
       expandable: !!item.children?.length,
       disabled: isItemDisabled ? isItemDisabled(item) : false
     };
     itemMap[id] = item;
-    return {
-      id,
-      children: item.children?.map((child, childIndex) => processItem(child, childIndex, id))
-    };
+    itemOrderedChildrenIds[id] = [];
+    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
+    if (!itemOrderedChildrenIds[parentIdWithDefault]) {
+      itemOrderedChildrenIds[parentIdWithDefault] = [];
+    }
+    itemOrderedChildrenIds[parentIdWithDefault].push(id);
+    item.children?.forEach(child => processItem(child, id));
   };
-  const nodeTree = items.map((item, itemIndex) => processItem(item, itemIndex, null));
+  items.forEach(item => processItem(item, null));
+  const itemChildrenIndexes = {};
+  Object.keys(itemOrderedChildrenIds).forEach(parentId => {
+    itemChildrenIndexes[parentId] = buildSiblingIndexes(itemOrderedChildrenIds[parentId]);
+  });
   return {
-    nodeMap,
-    nodeTree,
-    itemMap
+    itemMetaMap,
+    itemMap,
+    itemOrderedChildrenIds,
+    itemChildrenIndexes
   };
 };
 export const useTreeViewItems = ({
   instance,
-  publicAPI,
   params,
   state,
   setState
 }) => {
-  const getNode = React.useCallback(itemId => state.items.nodeMap[itemId], [state.items.nodeMap]);
+  const getItemMeta = React.useCallback(itemId => state.items.itemMetaMap[itemId], [state.items.itemMetaMap]);
   const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
   const isItemDisabled = React.useCallback(itemId => {
     if (itemId == null) {
       return false;
     }
-    let node = instance.getNode(itemId);
+    let itemMeta = instance.getItemMeta(itemId);
 
     // This can be called before the item has been added to the item map.
-    if (!node) {
+    if (!itemMeta) {
       return false;
     }
-    if (node.disabled) {
+    if (itemMeta.disabled) {
       return true;
     }
-    while (node.parentId != null) {
-      node = instance.getNode(node.parentId);
-      if (node.disabled) {
+    while (itemMeta.parentId != null) {
+      itemMeta = instance.getItemMeta(itemMeta.parentId);
+      if (itemMeta.disabled) {
         return true;
       }
     }
     return false;
   }, [instance]);
-  const getChildrenIds = React.useCallback(itemId => Object.values(state.items.nodeMap).filter(item => item.parentId === itemId).sort((a, b) => a.index - b.index).map(child => child.id), [state.items.nodeMap]);
-  const getNavigableChildrenIds = itemId => {
-    let childrenIds = instance.getChildrenIds(itemId);
-    if (!params.disabledItemsFocusable) {
-      childrenIds = childrenIds.filter(item => !instance.isItemDisabled(item));
+  const getItemIndex = React.useCallback(itemId => {
+    const parentId = instance.getItemMeta(itemId).parentId ?? TREE_VIEW_ROOT_PARENT_ID;
+    return state.items.itemChildrenIndexes[parentId][itemId];
+  }, [instance, state.items.itemChildrenIndexes]);
+  const getItemOrderedChildrenIds = React.useCallback(itemId => state.items.itemOrderedChildrenIds[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? [], [state.items.itemOrderedChildrenIds]);
+  const isItemNavigable = itemId => {
+    if (params.disabledItemsFocusable) {
+      return true;
     }
-    return childrenIds;
+    return !instance.isItemDisabled(itemId);
   };
   const areItemUpdatesPreventedRef = React.useRef(false);
   const preventItemUpdates = React.useCallback(() => {
@@ -98,8 +110,8 @@ export const useTreeViewItems = ({
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel
       });
-      Object.values(prevState.items.nodeMap).forEach(item => {
-        if (!newState.nodeMap[item.id]) {
+      Object.values(prevState.items.itemMetaMap).forEach(item => {
+        if (!newState.itemMetaMap[item.id]) {
           publishTreeViewEvent(instance, 'removeItem', {
             id: item.id
           });
@@ -111,34 +123,32 @@ export const useTreeViewItems = ({
     });
   }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
   const getItemsToRender = () => {
-    const getPropsFromItemId = ({
-      id,
-      children
-    }) => {
-      const item = state.items.nodeMap[id];
+    const getPropsFromItemId = id => {
+      const item = state.items.itemMetaMap[id];
       return {
         label: item.label,
         itemId: item.id,
         id: item.idAttribute,
-        children: children?.map(getPropsFromItemId)
+        children: state.items.itemOrderedChildrenIds[id].map(getPropsFromItemId)
       };
     };
-    return state.items.nodeTree.map(getPropsFromItemId);
+    return state.items.itemOrderedChildrenIds[TREE_VIEW_ROOT_PARENT_ID].map(getPropsFromItemId);
   };
-  populateInstance(instance, {
-    getNode,
-    getItem,
-    getItemsToRender,
-    getChildrenIds,
-    getNavigableChildrenIds,
-    isItemDisabled,
-    preventItemUpdates,
-    areItemUpdatesPrevented
-  });
-  populatePublicAPI(publicAPI, {
-    getItem
-  });
   return {
+    publicAPI: {
+      getItem
+    },
+    instance: {
+      getItemMeta,
+      getItem,
+      getItemsToRender,
+      getItemIndex,
+      getItemOrderedChildrenIds,
+      isItemDisabled,
+      isItemNavigable,
+      preventItemUpdates,
+      areItemUpdatesPrevented
+    },
     contextValue: {
       disabledItemsFocusable: params.disabledItemsFocusable
     }