@mui/x-tree-view 7.1.1 → 7.2.0

package/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'

package/internals/utils/tree.d.ts

@@ -0,0 +1,8 @@
+import { TreeViewInstance } from '../models';
+import type { UseTreeViewExpansionSignature } from '../plugins/useTreeViewExpansion';
+import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
+export declare const getPreviousNavigableItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getNextNavigableItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>, itemId: string) => string | null;
+export declare const getLastNavigableItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
+export declare const getFirstNavigableItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>) => string;
+export declare const getNavigableItemsInRange: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemAId: string, itemBId: string) => string[];

package/internals/utils/tree.js

@@ -0,0 +1,137 @@
+const getLastNavigableItemInArray = (instance, items) => {
+  // Equivalent to Array.prototype.findLastIndex
+  let itemIndex = items.length - 1;
+  while (itemIndex >= 0 && !instance.isItemNavigable(items[itemIndex])) {
+    itemIndex -= 1;
+  }
+  if (itemIndex === -1) {
+    return undefined;
+  }
+  return items[itemIndex];
+};
+export const getPreviousNavigableItem = (instance, itemId) => {
+  const itemMeta = instance.getItemMeta(itemId);
+  const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
+  const itemIndex = instance.getItemIndex(itemId);
+
+  // TODO: What should we do if the parent is not navigable?
+  if (itemIndex === 0) {
+    return itemMeta.parentId;
+  }
+  let currentItemId = siblings[itemIndex - 1];
+  let lastNavigableChild = getLastNavigableItemInArray(instance, instance.getItemOrderedChildrenIds(currentItemId));
+  while (instance.isItemExpanded(currentItemId) && lastNavigableChild != null) {
+    currentItemId = lastNavigableChild;
+    lastNavigableChild = instance.getItemOrderedChildrenIds(currentItemId).find(instance.isItemNavigable);
+  }
+  return currentItemId;
+};
+export const getNextNavigableItem = (instance, itemId) => {
+  // If the item is expanded and has some navigable children, return the first of them.
+  if (instance.isItemExpanded(itemId)) {
+    const firstNavigableChild = instance.getItemOrderedChildrenIds(itemId).find(instance.isItemNavigable);
+    if (firstNavigableChild != null) {
+      return firstNavigableChild;
+    }
+  }
+  let itemMeta = instance.getItemMeta(itemId);
+  while (itemMeta != null) {
+    // Try to find the first navigable sibling after the current item.
+    const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
+    const currentItemIndex = instance.getItemIndex(itemMeta.id);
+    if (currentItemIndex < siblings.length - 1) {
+      let nextItemIndex = currentItemIndex + 1;
+      while (!instance.isItemNavigable(siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
+        nextItemIndex += 1;
+      }
+      if (instance.isItemNavigable(siblings[nextItemIndex])) {
+        return siblings[nextItemIndex];
+      }
+    }
+
+    // If the sibling does not exist, go up a level to the parent and try again.
+    itemMeta = instance.getItemMeta(itemMeta.parentId);
+  }
+  return null;
+};
+export const getLastNavigableItem = instance => {
+  let itemId = null;
+  while (itemId == null || instance.isItemExpanded(itemId)) {
+    const children = instance.getItemOrderedChildrenIds(itemId);
+    const lastNavigableChild = getLastNavigableItemInArray(instance, children);
+
+    // The item has no navigable children.
+    if (lastNavigableChild == null) {
+      return itemId;
+    }
+    itemId = lastNavigableChild;
+  }
+  return itemId;
+};
+export const getFirstNavigableItem = instance => instance.getItemOrderedChildrenIds(null).find(instance.isItemNavigable);
+
+/**
+ * This is used to determine the start and end of a selection range so
+ * we can get the items between the two border items.
+ *
+ * It finds the items' common ancestor using
+ * a naive implementation of a lowest common ancestor algorithm
+ * (https://en.wikipedia.org/wiki/Lowest_common_ancestor).
+ * Then compares the ancestor's 2 children that are ancestors of itemA and ItemB
+ * so we can compare their indexes to work out which item comes first in a depth first search.
+ * (https://en.wikipedia.org/wiki/Depth-first_search)
+ *
+ * Another way to put it is which item is shallower in a trémaux tree
+ * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
+ */
+const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
+  if (itemAId === itemBId) {
+    return [itemAId, itemBId];
+  }
+  const itemMetaA = instance.getItemMeta(itemAId);
+  const itemMetaB = instance.getItemMeta(itemBId);
+  if (itemMetaA.parentId === itemMetaB.id || itemMetaB.parentId === itemMetaA.id) {
+    return itemMetaB.parentId === itemMetaA.id ? [itemMetaA.id, itemMetaB.id] : [itemMetaB.id, itemMetaA.id];
+  }
+  const aFamily = [itemMetaA.id];
+  const bFamily = [itemMetaB.id];
+  let aAncestor = itemMetaA.parentId;
+  let bAncestor = itemMetaB.parentId;
+  let aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
+  let bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
+  let continueA = true;
+  let continueB = true;
+  while (!bAncestorIsCommon && !aAncestorIsCommon) {
+    if (continueA) {
+      aFamily.push(aAncestor);
+      aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
+      continueA = aAncestor !== null;
+      if (!aAncestorIsCommon && continueA) {
+        aAncestor = instance.getItemMeta(aAncestor).parentId;
+      }
+    }
+    if (continueB && !aAncestorIsCommon) {
+      bFamily.push(bAncestor);
+      bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
+      continueB = bAncestor !== null;
+      if (!bAncestorIsCommon && continueB) {
+        bAncestor = instance.getItemMeta(bAncestor).parentId;
+      }
+    }
+  }
+  const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
+  const ancestorFamily = instance.getItemOrderedChildrenIds(commonAncestor);
+  const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
+  const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
+  return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [itemAId, itemBId] : [itemBId, itemAId];
+};
+export const getNavigableItemsInRange = (instance, itemAId, itemBId) => {
+  const [first, last] = findOrderInTremauxTree(instance, itemAId, itemBId);
+  const items = [first];
+  let current = first;
+  while (current !== last) {
+    current = getNextNavigableItem(instance, current);
+    items.push(current);
+  }
+  return items;
+};

package/modern/TreeItem/TreeItem.js

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

package/modern/TreeItem2/TreeItem2.js

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

package/modern/index.js

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

package/modern/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

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

package/modern/internals/TreeViewProvider/TreeViewProvider.js

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

package/modern/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js

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

package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

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

package/modern/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/modern/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 = {