@mui/x-tree-view 7.1.1 → 7.3.0

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
   }) => {
@@ -105,20 +94,34 @@ export const useTreeViewFocus = ({
       instance.focusDefaultItem(null);
     }
   });
-  const createHandleFocus = otherHandlers => event => {
+  const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
       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),
+      onFocus: createRootHandleFocus(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 {
     /**

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) {
+    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
     }

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

@@ -1,4 +1,4 @@
-import { TreeViewNode, DefaultizedProps, TreeViewPluginSignature } from '../../models';
+import { TreeViewItemMeta, DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { TreeViewItemId } from '../../../models';
 interface TreeViewItemProps {
     label: string;
@@ -15,19 +15,20 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
     getItem: (itemId: string) => R;
 }
 export interface UseTreeViewItemsInstance<R extends {}> extends UseTreeViewItemsPublicAPI<R> {
-    getNode: (itemId: string) => TreeViewNode;
+    getItemMeta: (itemId: string) => TreeViewItemMeta;
     getItemsToRender: () => TreeViewItemProps[];
-    getChildrenIds: (itemId: string | null) => string[];
-    getNavigableChildrenIds: (itemId: string | null) => string[];
-    isItemDisabled: (itemId: string | null) => itemId is string;
+    getItemOrderedChildrenIds: (parentId: string | null) => string[];
+    isItemDisabled: (itemId: string) => itemId is string;
+    isItemNavigable: (itemId: string) => boolean;
+    getItemIndex: (itemId: string) => number;
     /**
      * Freeze any future update to the state based on the `items` prop.
-     * This is useful when `useTreeViewJSXNodes` is used to avoid having conflicting sources of truth.
+     * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
      */
     preventItemUpdates: () => void;
     /**
      * Check if the updates to the state based on the `items` prop are prevented.
-     * This is useful when `useTreeViewJSXNodes` is used to avoid having conflicting sources of truth.
+     * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
      * @returns {boolean} `true` if the updates to the state based on the `items` prop are prevented.
      */
     areItemUpdatesPrevented: () => boolean;
@@ -73,15 +74,18 @@ interface UseTreeViewItemsEventLookup {
         };
     };
 }
-export interface TreeViewItemIdAndChildren {
-    id: TreeViewItemId;
-    children?: TreeViewItemIdAndChildren[];
-}
 export interface UseTreeViewItemsState<R extends {}> {
     items: {
-        nodeTree: TreeViewItemIdAndChildren[];
-        nodeMap: TreeViewNodeMap;
+        itemMetaMap: TreeViewItemMetaMap;
         itemMap: TreeViewItemMap<R>;
+        itemOrderedChildrenIds: {
+            [parentItemId: string]: string[];
+        };
+        itemChildrenIndexes: {
+            [parentItemId: string]: {
+                [itemId: string]: number;
+            };
+        };
     };
 }
 interface UseTreeViewItemsContextValue extends Pick<UseTreeViewItemsDefaultizedParameters<any>, 'disabledItemsFocusable'> {
@@ -95,8 +99,8 @@ export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
     state: UseTreeViewItemsState<any>;
     contextValue: UseTreeViewItemsContextValue;
 }>;
-export type TreeViewNodeMap = {
-    [itemId: string]: TreeViewNode;
+export type TreeViewItemMetaMap = {
+    [itemId: string]: TreeViewItemMeta;
 };
 export type TreeViewItemMap<R extends {}> = {
     [itemId: string]: R;

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

@@ -0,0 +1,4 @@
+export declare const TREE_VIEW_ROOT_PARENT_ID = "__TREE_VIEW_ROOT_PARENT_ID__";
+export declare const buildSiblingIndexes: (siblings: string[]) => {
+    [itemId: string]: number;
+};

package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js

@@ -0,0 +1,8 @@
+export const TREE_VIEW_ROOT_PARENT_ID = '__TREE_VIEW_ROOT_PARENT_ID__';
+export const buildSiblingIndexes = siblings => {
+  const siblingsIndexLookup = {};
+  siblings.forEach((childId, index) => {
+    siblingsIndexLookup[childId] = index;
+  });
+  return siblingsIndexLookup;
+};

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
 import { useTreeViewContext } from '../../TreeViewProvider/useTreeViewContext';
-import { DescendantProvider, useDescendant } from '../../TreeViewProvider/DescendantProvider';
+import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from '../../TreeViewProvider/TreeViewChildrenItemProvider';
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from '../useTreeViewItems/useTreeViewItems.utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useTreeViewJSXItems = ({
   instance,
@@ -14,12 +15,12 @@ export const useTreeViewJSXItems = ({
   instance.preventItemUpdates();
   const insertJSXItem = useEventCallback(item => {
     setState(prevState => {
-      if (prevState.items.nodeMap[item.id] != null) {
+      if (prevState.items.itemMetaMap[item.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: "${item.id}"`].join('\n'));
       }
       return _extends({}, prevState, {
         items: _extends({}, prevState.items, {
-          nodeMap: _extends({}, prevState.items.nodeMap, {
+          itemMetaMap: _extends({}, prevState.items.itemMetaMap, {
             [item.id]: item
           }),
           // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
@@ -33,15 +34,28 @@ export const useTreeViewJSXItems = ({
       });
     });
   });
+  const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
+    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
+    setState(prevState => _extends({}, prevState, {
+      items: _extends({}, prevState.items, {
+        itemOrderedChildrenIds: _extends({}, prevState.items.itemOrderedChildrenIds, {
+          [parentIdWithDefault]: orderedChildrenIds
+        }),
+        itemChildrenIndexes: _extends({}, prevState.items.itemChildrenIndexes, {
+          [parentIdWithDefault]: buildSiblingIndexes(orderedChildrenIds)
+        })
+      })
+    }));
+  };
   const removeJSXItem = useEventCallback(itemId => {
     setState(prevState => {
-      const newNodeMap = _extends({}, prevState.items.nodeMap);
+      const newItemMetaMap = _extends({}, prevState.items.itemMetaMap);
       const newItemMap = _extends({}, prevState.items.itemMap);
-      delete newNodeMap[itemId];
+      delete newItemMetaMap[itemId];
       delete newItemMap[itemId];
       return _extends({}, prevState, {
         items: _extends({}, prevState.items, {
-          nodeMap: newNodeMap,
+          itemMetaMap: newItemMetaMap,
           itemMap: newItemMap
         })
       });
@@ -63,17 +77,29 @@ export const useTreeViewJSXItems = ({
       });
     };
   });
-  populateInstance(instance, {
-    insertJSXItem,
-    removeJSXItem,
-    mapFirstCharFromJSX
-  });
+  return {
+    instance: {
+      insertJSXItem,
+      removeJSXItem,
+      setJSXItemsOrderedChildrenIds,
+      mapFirstCharFromJSX
+    }
+  };
+};
+const isItemExpandable = reactChildren => {
+  if (Array.isArray(reactChildren)) {
+    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
+  }
+  return Boolean(reactChildren);
 };
 const useTreeViewJSXItemsItemPlugin = ({
   props,
   rootRef,
   contentRef
 }) => {
+  const {
+    instance
+  } = useTreeViewContext();
   const {
     children,
     disabled = false,
@@ -81,43 +107,37 @@ const useTreeViewJSXItemsItemPlugin = ({
     itemId,
     id
   } = props;
+  const parentContext = React.useContext(TreeViewChildrenItemContext);
+  if (parentContext == null) {
+    throw new Error(['MUI X: Could not find the Tree View Children Item context.', 'It looks like you rendered your component outside of a SimpleTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
+  }
   const {
-    instance
-  } = useTreeViewContext();
-  const isExpandable = reactChildren => {
-    if (Array.isArray(reactChildren)) {
-      return reactChildren.length > 0 && reactChildren.some(isExpandable);
-    }
-    return Boolean(reactChildren);
-  };
-  const expandable = isExpandable(children);
-  const [treeItemElement, setTreeItemElement] = React.useState(null);
+    registerChild,
+    unregisterChild,
+    parentId
+  } = parentContext;
+  const expandable = isItemExpandable(children);
   const pluginContentRef = React.useRef(null);
-  const handleRootRef = useForkRef(setTreeItemElement, rootRef);
   const handleContentRef = useForkRef(pluginContentRef, contentRef);
-  const descendant = React.useMemo(() => ({
-    element: treeItemElement,
-    id: itemId
-  }), [itemId, treeItemElement]);
-  const {
-    index,
-    parentId
-  } = useDescendant(descendant);
+
+  // Prevent any flashing
+  useEnhancedEffect(() => {
+    const idAttributeWithDefault = instance.getTreeItemIdAttribute(itemId, id);
+    registerChild(idAttributeWithDefault, itemId);
+    return () => {
+      unregisterChild(idAttributeWithDefault);
+    };
+  }, [instance, registerChild, unregisterChild, itemId, id]);
   React.useEffect(() => {
-    // On the first render a item's index will be -1. We want to wait for the real index.
-    if (index !== -1) {
-      instance.insertJSXItem({
-        id: itemId,
-        idAttribute: id,
-        index,
-        parentId,
-        expandable,
-        disabled
-      });
-      return () => instance.removeJSXItem(itemId);
-    }
-    return undefined;
-  }, [instance, parentId, index, itemId, expandable, disabled, id]);
+    instance.insertJSXItem({
+      id: itemId,
+      idAttribute: id,
+      parentId,
+      expandable,
+      disabled
+    });
+    return () => instance.removeJSXItem(itemId);
+  }, [instance, parentId, itemId, expandable, disabled, id]);
   React.useEffect(() => {
     if (label) {
       return instance.mapFirstCharFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
@@ -126,15 +146,20 @@ const useTreeViewJSXItemsItemPlugin = ({
   }, [instance, itemId, label]);
   return {
     contentRef: handleContentRef,
-    rootRef: handleRootRef
+    rootRef
   };
 };
 useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
 useTreeViewJSXItems.wrapItem = ({
   children,
   itemId
-}) => /*#__PURE__*/_jsx(DescendantProvider, {
-  id: itemId,
+}) => /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
+  itemId: itemId,
+  children: children
+});
+useTreeViewJSXItems.wrapRoot = ({
+  children
+}) => /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
   children: children
 });
 useTreeViewJSXItems.params = {};

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

@@ -1,10 +1,11 @@
-import { TreeViewNode, TreeViewPluginSignature } from '../../models';
+import { TreeViewItemMeta, TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewKeyboardNavigationSignature } from '../useTreeViewKeyboardNavigation';
 export interface UseTreeViewItemsInstance {
-    insertJSXItem: (item: TreeViewNode) => void;
+    insertJSXItem: (item: TreeViewItemMeta) => void;
     removeJSXItem: (itemId: string) => void;
     mapFirstCharFromJSX: (itemId: string, firstChar: string) => () => void;
+    setJSXItemsOrderedChildrenIds: (parentId: string | null, orderedChildrenIds: string[]) => void;
 }
 export interface UseTreeViewJSXItemsParameters {
 }