@mui/x-tree-view 7.1.1 → 7.2.0

package/modern/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/modern/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/modern/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,23 @@ export const useTreeViewJSXItems = ({
       });
     };
   });
-  populateInstance(instance, {
-    insertJSXItem,
-    removeJSXItem,
-    mapFirstCharFromJSX
-  });
+  return {
+    instance: {
+      insertJSXItem,
+      removeJSXItem,
+      setJSXItemsOrderedChildrenIds,
+      mapFirstCharFromJSX
+    }
+  };
 };
 const useTreeViewJSXItemsItemPlugin = ({
   props,
   rootRef,
   contentRef
 }) => {
+  const {
+    instance
+  } = useTreeViewContext();
   const {
     children,
     disabled = false,
@@ -81,9 +101,15 @@ 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();
+    registerChild,
+    unregisterChild,
+    parentId
+  } = parentContext;
   const isExpandable = reactChildren => {
     if (Array.isArray(reactChildren)) {
       return reactChildren.length > 0 && reactChildren.some(isExpandable);
@@ -91,33 +117,27 @@ const useTreeViewJSXItemsItemPlugin = ({
     return Boolean(reactChildren);
   };
   const expandable = isExpandable(children);
-  const [treeItemElement, setTreeItemElement] = React.useState(null);
   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/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { getFirstItem, getLastItem, getNextItem, getPreviousItem, populateInstance } from '../../useTreeView/useTreeView.utils';
+import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem } from '../../utils/tree';
 function isPrintableCharacter(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
@@ -29,12 +29,12 @@ export const useTreeViewKeyboardNavigation = ({
       return;
     }
     const newFirstCharMap = {};
-    const processItem = node => {
-      newFirstCharMap[node.id] = node.label.substring(0, 1).toLowerCase();
+    const processItem = item => {
+      newFirstCharMap[item.id] = item.label.substring(0, 1).toLowerCase();
     };
-    Object.values(state.items.nodeMap).forEach(processItem);
+    Object.values(state.items.itemMetaMap).forEach(processItem);
     firstCharMap.current = newFirstCharMap;
-  }, [state.items.nodeMap, params.getItemId, instance]);
+  }, [state.items.itemMetaMap, params.getItemId, instance]);
   const getFirstMatchingItem = (itemId, firstChar) => {
     let start;
     let index;
@@ -43,7 +43,7 @@ export const useTreeViewKeyboardNavigation = ({
     const firstChars = [];
     // This really only works since the ids are strings
     Object.keys(firstCharMap.current).forEach(mapItemId => {
-      const map = instance.getNode(mapItemId);
+      const map = instance.getItemMeta(mapItemId);
       const visible = map.parentId ? instance.isItemExpanded(map.parentId) : true;
       const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isItemDisabled(mapItemId);
       if (visible && !shouldBeSkipped) {
@@ -128,7 +128,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focus the next focusable item
       case key === 'ArrowDown':
         {
-          const nextItem = getNextItem(instance, itemId);
+          const nextItem = getNextNavigableItem(instance, itemId);
           if (nextItem) {
             event.preventDefault();
             instance.focusItem(event, nextItem);
@@ -148,7 +148,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the previous focusable item
       case key === 'ArrowUp':
         {
-          const previousItem = getPreviousItem(instance, itemId);
+          const previousItem = getPreviousNavigableItem(instance, itemId);
           if (previousItem) {
             event.preventDefault();
             instance.focusItem(event, previousItem);
@@ -170,7 +170,7 @@ export const useTreeViewKeyboardNavigation = ({
       case key === 'ArrowRight' && !isRTL || key === 'ArrowLeft' && isRTL:
         {
           if (instance.isItemExpanded(itemId)) {
-            const nextItemId = getNextItem(instance, itemId);
+            const nextItemId = getNextNavigableItem(instance, itemId);
             if (nextItemId) {
               instance.focusItem(event, nextItemId);
               event.preventDefault();
@@ -190,7 +190,7 @@ export const useTreeViewKeyboardNavigation = ({
             instance.toggleItemExpansion(event, itemId);
             event.preventDefault();
           } else {
-            const parent = instance.getNode(itemId).parentId;
+            const parent = instance.getItemMeta(itemId).parentId;
             if (parent) {
               instance.focusItem(event, parent);
               event.preventDefault();
@@ -202,7 +202,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the first item in the tree
       case key === 'Home':
         {
-          instance.focusItem(event, getFirstItem(instance));
+          instance.focusItem(event, getFirstNavigableItem(instance));
 
           // Multi select behavior when pressing Ctrl + Shift + Home
           // Selects the focused item and all items up to the first item.
@@ -216,7 +216,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the last item in the tree
       case key === 'End':
         {
-          instance.focusItem(event, getLastItem(instance));
+          instance.focusItem(event, getLastNavigableItem(instance));
 
           // Multi select behavior when pressing Ctrl + Shirt + End
           // Selects the focused item and all the items down to the last item.
@@ -240,8 +240,8 @@ export const useTreeViewKeyboardNavigation = ({
       case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
         {
           instance.selectRange(event, {
-            start: getFirstItem(instance),
-            end: getLastItem(instance)
+            start: getFirstNavigableItem(instance),
+            end: getLastNavigableItem(instance)
           });
           event.preventDefault();
           break;
@@ -260,9 +260,11 @@ export const useTreeViewKeyboardNavigation = ({
         }
     }
   };
-  populateInstance(instance, {
-    updateFirstCharMap,
-    handleItemKeyDown
-  });
+  return {
+    instance: {
+      updateFirstCharMap,
+      handleItemKeyDown
+    }
+  };
 };
 useTreeViewKeyboardNavigation.params = {};

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { populateInstance, getNextItem, getFirstItem, getLastItem } from '../../useTreeView/useTreeView.utils';
-import { findOrderInTremauxTree } from './useTreeViewSelection.utils';
+import { getFirstNavigableItem, getLastNavigableItem, getNavigableItemsInRange } from '../../utils/tree';
 export const useTreeViewSelection = ({
   instance,
   params,
@@ -58,16 +57,6 @@ export const useTreeViewSelection = ({
     lastSelectionWasRange.current = false;
     currentRangeSelection.current = [];
   };
-  const getItemsInRange = (itemAId, itemBId) => {
-    const [first, last] = findOrderInTremauxTree(instance, itemAId, itemBId);
-    const items = [first];
-    let current = first;
-    while (current !== last) {
-      current = getNextItem(instance, current);
-      items.push(current);
-    }
-    return items;
-  };
   const handleRangeArrowSelect = (event, items) => {
     let base = models.selectedItems.value.slice();
     const {
@@ -105,7 +94,7 @@ export const useTreeViewSelection = ({
     if (lastSelectionWasRange.current) {
       base = base.filter(id => currentRangeSelection.current.indexOf(id) === -1);
     }
-    let range = getItemsInRange(start, end);
+    let range = getNavigableItemsInRange(instance, start, end);
     range = range.filter(item => !instance.isItemDisabled(item));
     currentRangeSelection.current = range;
     let newSelected = base.concat(range);
@@ -142,7 +131,7 @@ export const useTreeViewSelection = ({
     const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
     instance.selectRange(event, {
       start,
-      end: getFirstItem(instance)
+      end: getFirstNavigableItem(instance)
     });
   };
   const rangeSelectToLast = (event, itemId) => {
@@ -152,20 +141,20 @@ export const useTreeViewSelection = ({
     const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
     instance.selectRange(event, {
       start,
-      end: getLastItem(instance)
+      end: getLastNavigableItem(instance)
     });
   };
-  populateInstance(instance, {
-    isItemSelected,
-    selectItem,
-    selectRange,
-    rangeSelectToLast,
-    rangeSelectToFirst
-  });
   return {
     getRootProps: () => ({
       'aria-multiselectable': params.multiSelect
     }),
+    instance: {
+      isItemSelected,
+      selectItem,
+      selectRange,
+      rangeSelectToLast,
+      rangeSelectToFirst
+    },
     contextValue: {
       selection: {
         multiSelect: params.multiSelect

package/modern/internals/useTreeView/useTreeView.js

@@ -39,12 +39,12 @@ export const useTreeView = inParams => {
   const rootPropsGetters = [];
   const contextValue = {
     publicAPI,
-    instance: instance
+    instance: instance,
+    rootRef: innerRootRef
   };
   const runPlugin = plugin => {
     const pluginResponse = plugin({
       instance,
-      publicAPI,
       params,
       slots: params.slots,
       slotProps: params.slotProps,
@@ -52,10 +52,16 @@ export const useTreeView = inParams => {
       setState,
       rootRef: innerRootRef,
       models
-    }) || {};
+    });
     if (pluginResponse.getRootProps) {
       rootPropsGetters.push(pluginResponse.getRootProps);
     }
+    if (pluginResponse.publicAPI) {
+      Object.assign(publicAPI, pluginResponse.publicAPI);
+    }
+    if (pluginResponse.instance) {
+      Object.assign(instance, pluginResponse.instance);
+    }
     if (pluginResponse.contextValue) {
       Object.assign(contextValue, pluginResponse.contextValue);
     }
@@ -99,6 +105,18 @@ export const useTreeView = inParams => {
     });
     return finalChildren;
   };
+  const rootWrappers = plugins.map(plugin => plugin.wrapRoot).filter(wrapRoot => !!wrapRoot);
+  contextValue.wrapRoot = ({
+    children
+  }) => {
+    let finalChildren = children;
+    rootWrappers.forEach(rootWrapper => {
+      finalChildren = rootWrapper({
+        children: finalChildren
+      });
+    });
+    return finalChildren;
+  };
   const getRootProps = (otherHandlers = {}) => {
     const rootProps = _extends({
       role: 'tree'