@mui/x-tree-view 7.1.1 → 7.3.0

package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useTreeView = require("../../useTreeView/useTreeView.utils");
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
+var _useTreeViewItems = require("./useTreeViewItems.utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const updateItemsState = ({
@@ -17,79 +17,91 @@ const updateItemsState = ({
   getItemLabel,
   getItemId
 }) => {
-  const nodeMap = {};
+  const itemMetaMap = {};
   const itemMap = {};
-  const processItem = (item, index, parentId) => {
+  const itemOrderedChildrenIds = {
+    [_useTreeViewItems.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 ?? _useTreeViewItems.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] = (0, _useTreeViewItems.buildSiblingIndexes)(itemOrderedChildrenIds[parentId]);
+  });
   return {
-    nodeMap,
-    nodeTree,
-    itemMap
+    itemMetaMap,
+    itemMap,
+    itemOrderedChildrenIds,
+    itemChildrenIndexes
   };
 };
 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 ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
+    return state.items.itemChildrenIndexes[parentId][itemId];
+  }, [instance, state.items.itemChildrenIndexes]);
+  const getItemOrderedChildrenIds = React.useCallback(itemId => state.items.itemOrderedChildrenIds[itemId ?? _useTreeViewItems.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(() => {
@@ -107,8 +119,8 @@ 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]) {
           (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
             id: item.id
           });
@@ -120,34 +132,32 @@ 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[_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID].map(getPropsFromItemId);
   };
-  (0, _useTreeView.populateInstance)(instance, {
-    getNode,
-    getItem,
-    getItemsToRender,
-    getChildrenIds,
-    getNavigableChildrenIds,
-    isItemDisabled,
-    preventItemUpdates,
-    areItemUpdatesPrevented
-  });
-  (0, _useTreeView.populatePublicAPI)(publicAPI, {
-    getItem
-  });
   return {
+    publicAPI: {
+      getItem
+    },
+    instance: {
+      getItemMeta,
+      getItem,
+      getItemsToRender,
+      getItemIndex,
+      getItemOrderedChildrenIds,
+      isItemDisabled,
+      isItemNavigable,
+      preventItemUpdates,
+      areItemUpdatesPrevented
+    },
     contextValue: {
       disabledItemsFocusable: params.disabledItemsFocusable
     }

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildSiblingIndexes = exports.TREE_VIEW_ROOT_PARENT_ID = void 0;
+const TREE_VIEW_ROOT_PARENT_ID = exports.TREE_VIEW_ROOT_PARENT_ID = '__TREE_VIEW_ROOT_PARENT_ID__';
+const buildSiblingIndexes = siblings => {
+  const siblingsIndexLookup = {};
+  siblings.forEach((childId, index) => {
+    siblingsIndexLookup[childId] = index;
+  });
+  return siblingsIndexLookup;
+};
+exports.buildSiblingIndexes = buildSiblingIndexes;

package/node/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -9,10 +9,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useTreeView = require("../../useTreeView/useTreeView.utils");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 var _useTreeViewContext = require("../../TreeViewProvider/useTreeViewContext");
-var _DescendantProvider = require("../../TreeViewProvider/DescendantProvider");
+var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -23,12 +24,12 @@ const useTreeViewJSXItems = ({
   instance.preventItemUpdates();
   const insertJSXItem = (0, _useEventCallback.default)(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 (0, _extends2.default)({}, prevState, {
         items: (0, _extends2.default)({}, prevState.items, {
-          nodeMap: (0, _extends2.default)({}, prevState.items.nodeMap, {
+          itemMetaMap: (0, _extends2.default)({}, prevState.items.itemMetaMap, {
             [item.id]: item
           }),
           // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
@@ -42,15 +43,28 @@ const useTreeViewJSXItems = ({
       });
     });
   });
+  const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
+    const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
+    setState(prevState => (0, _extends2.default)({}, prevState, {
+      items: (0, _extends2.default)({}, prevState.items, {
+        itemOrderedChildrenIds: (0, _extends2.default)({}, prevState.items.itemOrderedChildrenIds, {
+          [parentIdWithDefault]: orderedChildrenIds
+        }),
+        itemChildrenIndexes: (0, _extends2.default)({}, prevState.items.itemChildrenIndexes, {
+          [parentIdWithDefault]: (0, _useTreeViewItems.buildSiblingIndexes)(orderedChildrenIds)
+        })
+      })
+    }));
+  };
   const removeJSXItem = (0, _useEventCallback.default)(itemId => {
     setState(prevState => {
-      const newNodeMap = (0, _extends2.default)({}, prevState.items.nodeMap);
+      const newItemMetaMap = (0, _extends2.default)({}, prevState.items.itemMetaMap);
       const newItemMap = (0, _extends2.default)({}, prevState.items.itemMap);
-      delete newNodeMap[itemId];
+      delete newItemMetaMap[itemId];
       delete newItemMap[itemId];
       return (0, _extends2.default)({}, prevState, {
         items: (0, _extends2.default)({}, prevState.items, {
-          nodeMap: newNodeMap,
+          itemMetaMap: newItemMetaMap,
           itemMap: newItemMap
         })
       });
@@ -72,18 +86,30 @@ const useTreeViewJSXItems = ({
       });
     };
   });
-  (0, _useTreeView.populateInstance)(instance, {
-    insertJSXItem,
-    removeJSXItem,
-    mapFirstCharFromJSX
-  });
+  return {
+    instance: {
+      insertJSXItem,
+      removeJSXItem,
+      setJSXItemsOrderedChildrenIds,
+      mapFirstCharFromJSX
+    }
+  };
 };
 exports.useTreeViewJSXItems = useTreeViewJSXItems;
+const isItemExpandable = reactChildren => {
+  if (Array.isArray(reactChildren)) {
+    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
+  }
+  return Boolean(reactChildren);
+};
 const useTreeViewJSXItemsItemPlugin = ({
   props,
   rootRef,
   contentRef
 }) => {
+  const {
+    instance
+  } = (0, _useTreeViewContext.useTreeViewContext)();
   const {
     children,
     disabled = false,
@@ -91,43 +117,37 @@ const useTreeViewJSXItemsItemPlugin = ({
     itemId,
     id
   } = props;
+  const parentContext = React.useContext(_TreeViewChildrenItemProvider.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
-  } = (0, _useTreeViewContext.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 = (0, _useForkRef.default)(setTreeItemElement, rootRef);
   const handleContentRef = (0, _useForkRef.default)(pluginContentRef, contentRef);
-  const descendant = React.useMemo(() => ({
-    element: treeItemElement,
-    id: itemId
-  }), [itemId, treeItemElement]);
-  const {
-    index,
-    parentId
-  } = (0, _DescendantProvider.useDescendant)(descendant);
+
+  // Prevent any flashing
+  (0, _useEnhancedEffect.default)(() => {
+    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());
@@ -136,15 +156,20 @@ const useTreeViewJSXItemsItemPlugin = ({
   }, [instance, itemId, label]);
   return {
     contentRef: handleContentRef,
-    rootRef: handleRootRef
+    rootRef
   };
 };
 useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
 useTreeViewJSXItems.wrapItem = ({
   children,
   itemId
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DescendantProvider.DescendantProvider, {
-  id: itemId,
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
+  itemId: itemId,
+  children: children
+});
+useTreeViewJSXItems.wrapRoot = ({
+  children
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
   children: children
 });
 useTreeViewJSXItems.params = {};

package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -8,7 +8,7 @@ exports.useTreeViewKeyboardNavigation = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useTreeView = require("../../useTreeView/useTreeView.utils");
+var _tree = require("../../utils/tree");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function isPrintableCharacter(string) {
@@ -38,12 +38,12 @@ 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;
@@ -52,7 +52,7 @@ 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) {
@@ -137,7 +137,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focus the next focusable item
       case key === 'ArrowDown':
         {
-          const nextItem = (0, _useTreeView.getNextItem)(instance, itemId);
+          const nextItem = (0, _tree.getNextNavigableItem)(instance, itemId);
           if (nextItem) {
             event.preventDefault();
             instance.focusItem(event, nextItem);
@@ -157,7 +157,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focuses the previous focusable item
       case key === 'ArrowUp':
         {
-          const previousItem = (0, _useTreeView.getPreviousItem)(instance, itemId);
+          const previousItem = (0, _tree.getPreviousNavigableItem)(instance, itemId);
           if (previousItem) {
             event.preventDefault();
             instance.focusItem(event, previousItem);
@@ -179,7 +179,7 @@ const useTreeViewKeyboardNavigation = ({
       case key === 'ArrowRight' && !isRTL || key === 'ArrowLeft' && isRTL:
         {
           if (instance.isItemExpanded(itemId)) {
-            const nextItemId = (0, _useTreeView.getNextItem)(instance, itemId);
+            const nextItemId = (0, _tree.getNextNavigableItem)(instance, itemId);
             if (nextItemId) {
               instance.focusItem(event, nextItemId);
               event.preventDefault();
@@ -199,7 +199,7 @@ 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();
@@ -211,7 +211,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focuses the first item in the tree
       case key === 'Home':
         {
-          instance.focusItem(event, (0, _useTreeView.getFirstItem)(instance));
+          instance.focusItem(event, (0, _tree.getFirstNavigableItem)(instance));
 
           // Multi select behavior when pressing Ctrl + Shift + Home
           // Selects the focused item and all items up to the first item.
@@ -225,7 +225,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focuses the last item in the tree
       case key === 'End':
         {
-          instance.focusItem(event, (0, _useTreeView.getLastItem)(instance));
+          instance.focusItem(event, (0, _tree.getLastNavigableItem)(instance));
 
           // Multi select behavior when pressing Ctrl + Shirt + End
           // Selects the focused item and all the items down to the last item.
@@ -249,8 +249,8 @@ const useTreeViewKeyboardNavigation = ({
       case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
         {
           instance.selectRange(event, {
-            start: (0, _useTreeView.getFirstItem)(instance),
-            end: (0, _useTreeView.getLastItem)(instance)
+            start: (0, _tree.getFirstNavigableItem)(instance),
+            end: (0, _tree.getLastNavigableItem)(instance)
           });
           event.preventDefault();
           break;
@@ -269,10 +269,12 @@ const useTreeViewKeyboardNavigation = ({
         }
     }
   };
-  (0, _useTreeView.populateInstance)(instance, {
-    updateFirstCharMap,
-    handleItemKeyDown
-  });
+  return {
+    instance: {
+      updateFirstCharMap,
+      handleItemKeyDown
+    }
+  };
 };
 exports.useTreeViewKeyboardNavigation = useTreeViewKeyboardNavigation;
 useTreeViewKeyboardNavigation.params = {};

package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -7,8 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewSelection = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useTreeView = require("../../useTreeView/useTreeView.utils");
-var _useTreeViewSelection = require("./useTreeViewSelection.utils");
+var _tree = require("../../utils/tree");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useTreeViewSelection = ({
@@ -67,16 +66,6 @@ const useTreeViewSelection = ({
     lastSelectionWasRange.current = false;
     currentRangeSelection.current = [];
   };
-  const getItemsInRange = (itemAId, itemBId) => {
-    const [first, last] = (0, _useTreeViewSelection.findOrderInTremauxTree)(instance, itemAId, itemBId);
-    const items = [first];
-    let current = first;
-    while (current !== last) {
-      current = (0, _useTreeView.getNextItem)(instance, current);
-      items.push(current);
-    }
-    return items;
-  };
   const handleRangeArrowSelect = (event, items) => {
     let base = models.selectedItems.value.slice();
     const {
@@ -114,7 +103,7 @@ const useTreeViewSelection = ({
     if (lastSelectionWasRange.current) {
       base = base.filter(id => currentRangeSelection.current.indexOf(id) === -1);
     }
-    let range = getItemsInRange(start, end);
+    let range = (0, _tree.getNavigableItemsInRange)(instance, start, end);
     range = range.filter(item => !instance.isItemDisabled(item));
     currentRangeSelection.current = range;
     let newSelected = base.concat(range);
@@ -151,7 +140,7 @@ const useTreeViewSelection = ({
     const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
     instance.selectRange(event, {
       start,
-      end: (0, _useTreeView.getFirstItem)(instance)
+      end: (0, _tree.getFirstNavigableItem)(instance)
     });
   };
   const rangeSelectToLast = (event, itemId) => {
@@ -161,20 +150,20 @@ const useTreeViewSelection = ({
     const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
     instance.selectRange(event, {
       start,
-      end: (0, _useTreeView.getLastItem)(instance)
+      end: (0, _tree.getLastNavigableItem)(instance)
     });
   };
-  (0, _useTreeView.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/node/internals/useTreeView/useTreeView.js

@@ -49,12 +49,12 @@ 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,
@@ -62,10 +62,16 @@ 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);
     }
@@ -109,6 +115,18 @@ 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 = (0, _extends2.default)({
       role: 'tree'