@mui/x-tree-view 7.1.0 → 7.2.0

package/node/internals/useTreeView/useTreeViewModels.js

@@ -31,7 +31,7 @@ const useTreeViewModels = (plugins, props) => {
     return initialState;
   });
   const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
-    const value = model.isControlled ? props[modelName] : modelsState[modelName];
+    const value = props[modelName] ?? modelsState[modelName];
     return [modelName, {
       value,
       setControlledValue: newValue => {
@@ -62,7 +62,7 @@ const useTreeViewModels = (plugins, props) => {
         if (!model.isControlled && defaultValue !== newDefaultValue) {
           console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled TreeView after being initialized. ` + `To suppress this warning opt to use a controlled TreeView.`].join('\n'));
         }
-      }, [JSON.stringify(defaultValue)]);
+      }, [JSON.stringify(newDefaultValue)]);
     });
   }
   /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */

package/node/internals/utils/tree.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPreviousNavigableItem = exports.getNextNavigableItem = exports.getNavigableItemsInRange = exports.getLastNavigableItem = exports.getFirstNavigableItem = void 0;
+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];
+};
+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;
+};
+exports.getPreviousNavigableItem = getPreviousNavigableItem;
+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;
+};
+exports.getNextNavigableItem = getNextNavigableItem;
+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;
+};
+exports.getLastNavigableItem = getLastNavigableItem;
+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
+ */
+exports.getFirstNavigableItem = getFirstNavigableItem;
+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];
+};
+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;
+};
+exports.getNavigableItemsInRange = getNavigableItemsInRange;

package/node/useTreeItem2/useTreeItem2.js

@@ -38,7 +38,7 @@ const useTreeItem2 = parameters => {
     itemId,
     children
   });
-  const idAttribute = instance.getTreeItemId(itemId, id);
+  const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef);
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.1.0",
-  "description": "The community edition of the tree view components (MUI X).",
+  "version": "7.2.0",
+  "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
   "license": "MIT",

package/useTreeItem2/useTreeItem2.js

@@ -31,7 +31,7 @@ export const useTreeItem2 = parameters => {
     itemId,
     children
   });
-  const idAttribute = instance.getTreeItemId(itemId, id);
+  const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const handleRootRef = useForkRef(rootRef, pluginRootRef);
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);

package/internals/TreeViewProvider/DescendantProvider.d.ts

@@ -1,38 +0,0 @@
-import * as React from 'react';
-/**
- * This hook registers our descendant by passing it into an array. We can then
- * search that array by to find its index when registering it in the component.
- * We use this for focus management, keyboard navigation, and typeahead
- * functionality for some components.
- *
- * The hook accepts the element item
- *
- * Our main goals with this are:
- *   1) maximum composability,
- *   2) minimal API friction
- *   3) SSR compatibility*
- *   4) concurrent safe
- *   5) index always up-to-date with the tree despite changes
- *   6) works with memoization of any component in the tree (hopefully)
- *
- * * As for SSR, the good news is that we don't actually need the index on the
- * server for most use-cases, as we are only using it to determine the order of
- * composed descendants for keyboard navigation.
- */
-export declare function useDescendant(descendant: TreeItemDescendant): {
-    parentId: string | null;
-    index: number;
-};
-interface DescendantProviderProps {
-    id?: string;
-    children: React.ReactNode;
-}
-export declare function DescendantProvider(props: DescendantProviderProps): React.JSX.Element;
-export declare namespace DescendantProvider {
-    var propTypes: any;
-}
-export interface TreeItemDescendant {
-    element: HTMLLIElement;
-    id: string;
-}
-export {};

package/internals/TreeViewProvider/DescendantProvider.js

@@ -1,176 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["element"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-
-/** Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md
- *  Modified slightly to suit our purposes.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function binaryFindElement(array, element) {
-  let start = 0;
-  let end = array.length - 1;
-  while (start <= end) {
-    const middle = Math.floor((start + end) / 2);
-    if (array[middle].element === element) {
-      return middle;
-    }
-
-    // eslint-disable-next-line no-bitwise
-    if (array[middle].element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING) {
-      end = middle - 1;
-    } else {
-      start = middle + 1;
-    }
-  }
-  return start;
-}
-const DescendantContext = /*#__PURE__*/React.createContext({});
-if (process.env.NODE_ENV !== 'production') {
-  DescendantContext.displayName = 'DescendantContext';
-}
-function usePrevious(value) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-const noop = () => {};
-
-/**
- * This hook registers our descendant by passing it into an array. We can then
- * search that array by to find its index when registering it in the component.
- * We use this for focus management, keyboard navigation, and typeahead
- * functionality for some components.
- *
- * The hook accepts the element item
- *
- * Our main goals with this are:
- *   1) maximum composability,
- *   2) minimal API friction
- *   3) SSR compatibility*
- *   4) concurrent safe
- *   5) index always up-to-date with the tree despite changes
- *   6) works with memoization of any component in the tree (hopefully)
- *
- * * As for SSR, the good news is that we don't actually need the index on the
- * server for most use-cases, as we are only using it to determine the order of
- * composed descendants for keyboard navigation.
- */
-export function useDescendant(descendant) {
-  const [, forceUpdate] = React.useState();
-  const {
-    registerDescendant = noop,
-    unregisterDescendant = noop,
-    descendants = [],
-    parentId = null
-  } = React.useContext(DescendantContext);
-
-  // This will initially return -1 because we haven't registered the descendant
-  // on the first render. After we register, this will then return the correct
-  // index on the following render, and we will re-register descendants
-  // so that everything is up-to-date before the user interacts with a
-  // collection.
-  const index = descendants.findIndex(item => item.element === descendant.element);
-  const previousDescendants = usePrevious(descendants);
-
-  // We also need to re-register descendants any time ANY of the other
-  // descendants have changed. My brain was melting when I wrote this and it
-  // feels a little off, but checking in render and using the result in the
-  // effect's dependency array works well enough.
-  const someDescendantsHaveChanged = descendants.some((newDescendant, position) => {
-    return previousDescendants && previousDescendants[position] && previousDescendants[position].element !== newDescendant.element;
-  });
-
-  // Prevent any flashing
-  useEnhancedEffect(() => {
-    if (descendant.element) {
-      registerDescendant(_extends({}, descendant, {
-        index
-      }));
-      return () => {
-        unregisterDescendant(descendant.element);
-      };
-    }
-    forceUpdate({});
-    return undefined;
-  }, [registerDescendant, unregisterDescendant, index, someDescendantsHaveChanged, descendant]);
-  return {
-    parentId,
-    index
-  };
-}
-export function DescendantProvider(props) {
-  const {
-    children,
-    id
-  } = props;
-  const [items, set] = React.useState([]);
-  const registerDescendant = React.useCallback(_ref => {
-    let {
-        element
-      } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded);
-    set(oldItems => {
-      if (oldItems.length === 0) {
-        // If there are no items, register at index 0 and bail.
-        return [_extends({}, other, {
-          element,
-          index: 0
-        })];
-      }
-      const index = binaryFindElement(oldItems, element);
-      let newItems;
-      if (oldItems[index] && oldItems[index].element === element) {
-        // If the element is already registered, just use the same array
-        newItems = oldItems;
-      } else {
-        // When registering a descendant, we need to make sure we insert in
-        // into the array in the same order that it appears in the DOM. So as
-        // new descendants are added or maybe some are removed, we always know
-        // that the array is up-to-date and correct.
-        //
-        // So here we look at our registered descendants and see if the new
-        // element we are adding appears earlier than an existing descendant's
-        // DOM node via `node.compareDocumentPosition`. If it does, we insert
-        // the new element at this index. Because `registerDescendant` will be
-        // called in an effect every time the descendants state value changes,
-        // we should be sure that this index is accurate when descendent
-        // elements come or go from our component.
-
-        const newItem = _extends({}, other, {
-          element,
-          index
-        });
-
-        // If an index is not found we will push the element to the end.
-        newItems = oldItems.slice();
-        newItems.splice(index, 0, newItem);
-      }
-      newItems.forEach((item, position) => {
-        item.index = position;
-      });
-      return newItems;
-    });
-  }, []);
-  const unregisterDescendant = React.useCallback(element => {
-    set(oldItems => oldItems.filter(item => element !== item.element));
-  }, []);
-  const value = React.useMemo(() => ({
-    descendants: items,
-    registerDescendant,
-    unregisterDescendant,
-    parentId: id
-  }), [items, registerDescendant, unregisterDescendant, id]);
-  return /*#__PURE__*/_jsx(DescendantContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-process.env.NODE_ENV !== "production" ? DescendantProvider.propTypes = {
-  children: PropTypes.node,
-  id: PropTypes.string
-} : void 0;

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

@@ -1,17 +0,0 @@
-import { TreeViewInstance } from '../../models';
-import { UseTreeViewItemsSignature } from '../useTreeViewItems';
-/**
- * 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
- */
-export declare const findOrderInTremauxTree: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>, nodeAId: string, nodeBId: string) => string[];

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js

@@ -1,55 +0,0 @@
-/**
- * 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
- */
-export const findOrderInTremauxTree = (instance, nodeAId, nodeBId) => {
-  if (nodeAId === nodeBId) {
-    return [nodeAId, nodeBId];
-  }
-  const nodeA = instance.getNode(nodeAId);
-  const nodeB = instance.getNode(nodeBId);
-  if (nodeA.parentId === nodeB.id || nodeB.parentId === nodeA.id) {
-    return nodeB.parentId === nodeA.id ? [nodeA.id, nodeB.id] : [nodeB.id, nodeA.id];
-  }
-  const aFamily = [nodeA.id];
-  const bFamily = [nodeB.id];
-  let aAncestor = nodeA.parentId;
-  let bAncestor = nodeB.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.getNode(aAncestor).parentId;
-      }
-    }
-    if (continueB && !aAncestorIsCommon) {
-      bFamily.push(bAncestor);
-      bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
-      continueB = bAncestor !== null;
-      if (!bAncestorIsCommon && continueB) {
-        bAncestor = instance.getNode(bAncestor).parentId;
-      }
-    }
-  }
-  const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
-  const ancestorFamily = instance.getChildrenIds(commonAncestor);
-  const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
-  const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
-  return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [nodeAId, nodeBId] : [nodeBId, nodeAId];
-};

package/internals/useTreeView/useTreeView.utils.d.ts

@@ -1,9 +0,0 @@
-import { TreeViewAnyPluginSignature, TreeViewInstance, TreeViewUsedInstance, TreeViewUsedPublicAPI } from '../models';
-import type { UseTreeViewExpansionSignature } from '../plugins/useTreeViewExpansion';
-import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
-export declare const getPreviousItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
-export declare const getNextItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>, itemId: string) => string | null;
-export declare const getLastItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
-export declare const getFirstItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>) => string;
-export declare const populateInstance: <T extends TreeViewAnyPluginSignature>(instance: TreeViewUsedInstance<T>, methods: T["instance"]) => void;
-export declare const populatePublicAPI: <T extends TreeViewAnyPluginSignature>(publicAPI: TreeViewUsedPublicAPI<T>, methods: T["publicAPI"]) => void;

package/internals/useTreeView/useTreeView.utils.js

@@ -1,46 +0,0 @@
-export const getPreviousItem = (instance, itemId) => {
-  const node = instance.getNode(itemId);
-  const siblings = instance.getNavigableChildrenIds(node.parentId);
-  const itemIndex = siblings.indexOf(itemId);
-  if (itemIndex === 0) {
-    return node.parentId;
-  }
-  let currentItem = siblings[itemIndex - 1];
-  while (instance.isItemExpanded(currentItem) && instance.getNavigableChildrenIds(currentItem).length > 0) {
-    currentItem = instance.getNavigableChildrenIds(currentItem).pop();
-  }
-  return currentItem;
-};
-export const getNextItem = (instance, itemId) => {
-  // If expanded get first child
-  if (instance.isItemExpanded(itemId) && instance.getNavigableChildrenIds(itemId).length > 0) {
-    return instance.getNavigableChildrenIds(itemId)[0];
-  }
-  let node = instance.getNode(itemId);
-  while (node != null) {
-    // Try to get next sibling
-    const siblings = instance.getNavigableChildrenIds(node.parentId);
-    const nextSibling = siblings[siblings.indexOf(node.id) + 1];
-    if (nextSibling) {
-      return nextSibling;
-    }
-
-    // If the sibling does not exist, go up a level to the parent and try again.
-    node = instance.getNode(node.parentId);
-  }
-  return null;
-};
-export const getLastItem = instance => {
-  let lastItem = instance.getNavigableChildrenIds(null).pop();
-  while (instance.isItemExpanded(lastItem)) {
-    lastItem = instance.getNavigableChildrenIds(lastItem).pop();
-  }
-  return lastItem;
-};
-export const getFirstItem = instance => instance.getNavigableChildrenIds(null)[0];
-export const populateInstance = (instance, methods) => {
-  Object.assign(instance, methods);
-};
-export const populatePublicAPI = (publicAPI, methods) => {
-  Object.assign(publicAPI, methods);
-};