@mui/x-tree-view 7.0.0-beta.7 → 7.0.0

package/modern/TreeItem/useTreeItemState.js

@@ -1,45 +1,45 @@
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
-export function useTreeItemState(nodeId) {
+export function useTreeItemState(itemId) {
   const {
     instance,
     selection: {
       multiSelect
     }
   } = useTreeViewContext();
-  const expandable = instance.isNodeExpandable(nodeId);
-  const expanded = instance.isNodeExpanded(nodeId);
-  const focused = instance.isNodeFocused(nodeId);
-  const selected = instance.isNodeSelected(nodeId);
-  const disabled = instance.isNodeDisabled(nodeId);
+  const expandable = instance.isNodeExpandable(itemId);
+  const expanded = instance.isNodeExpanded(itemId);
+  const focused = instance.isNodeFocused(itemId);
+  const selected = instance.isNodeSelected(itemId);
+  const disabled = instance.isNodeDisabled(itemId);
   const handleExpansion = event => {
     if (!disabled) {
       if (!focused) {
-        instance.focusItem(event, nodeId);
+        instance.focusItem(event, itemId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
       // If already expanded and trying to toggle selection don't close
-      if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
-        instance.toggleNodeExpansion(event, nodeId);
+      if (expandable && !(multiple && instance.isNodeExpanded(itemId))) {
+        instance.toggleNodeExpansion(event, itemId);
       }
     }
   };
   const handleSelection = event => {
     if (!disabled) {
       if (!focused) {
-        instance.focusItem(event, nodeId);
+        instance.focusItem(event, itemId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
       if (multiple) {
         if (event.shiftKey) {
           instance.selectRange(event, {
-            end: nodeId
+            end: itemId
           });
         } else {
-          instance.selectNode(event, nodeId, true);
+          instance.selectNode(event, itemId, true);
         }
       } else {
-        instance.selectNode(event, nodeId);
+        instance.selectNode(event, itemId);
       }
     }
   };

package/modern/TreeItem2/TreeItem2.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["id", "nodeId", "label", "disabled", "children", "slots", "slotProps"];
+const _excluded = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -165,7 +165,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
   });
   const {
       id,
-      nodeId,
+      itemId,
       label,
       disabled,
       children,
@@ -182,7 +182,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     status
   } = useTreeItem2({
     id,
-    nodeId,
+    itemId,
     children,
     label,
     disabled
@@ -234,7 +234,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     className: classes.groupTransition
   });
   return /*#__PURE__*/_jsx(TreeItem2Provider, {
-    nodeId: nodeId,
+    itemId: itemId,
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
       children: [/*#__PURE__*/_jsxs(Content, _extends({}, contentProps, {
         children: [/*#__PURE__*/_jsx(IconContainer, _extends({}, iconContainerProps, {
@@ -265,23 +265,23 @@ process.env.NODE_ENV !== "production" ? TreeItem2.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
-   * If `true`, the node is disabled.
+   * If `true`, the item is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
   /**
-   * The id attribute of the node. If not provided, it will be generated.
+   * The id attribute of the item. If not provided, it will be generated.
    */
   id: PropTypes.string,
   /**
-   * The label of the node.
+   * The id of the item.
+   * Must be unique.
    */
-  label: PropTypes.node,
+  itemId: PropTypes.string.isRequired,
   /**
-   * The id of the node.
-   * Must be unique.
+   * The label of the item.
    */
-  nodeId: PropTypes.string.isRequired,
+  label: PropTypes.node,
   /**
    * This prop isn't supported.
    * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.

package/modern/TreeItem2Provider/TreeItem2Provider.js

@@ -3,14 +3,14 @@ import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewCon
 function TreeItem2Provider(props) {
   const {
     children,
-    nodeId
+    itemId
   } = props;
   const {
     wrapItem
   } = useTreeViewContext();
   return wrapItem({
     children,
-    nodeId
+    itemId
   });
 }
 TreeItem2Provider.propTypes = {
@@ -19,6 +19,6 @@ TreeItem2Provider.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
-  nodeId: PropTypes.string.isRequired
+  itemId: PropTypes.string.isRequired
 };
 export { TreeItem2Provider };

package/modern/TreeView/TreeView.js

@@ -30,7 +30,7 @@ const warn = () => {
 
 /**
  * This component has been deprecated in favor of the new `SimpleTreeView` component.
- * You can have a look at how to migrate to the new component in the v7 [migration guide](https://next.mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
+ * You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
  *
  * Demos:
  *

package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -1,6 +1,6 @@
 import { useTreeViewContext } from '../../internals/TreeViewProvider/useTreeViewContext';
 export const useTreeItem2Utils = ({
-  nodeId,
+  itemId,
   children
 }) => {
   const {
@@ -11,23 +11,23 @@ export const useTreeItem2Utils = ({
   } = useTreeViewContext();
   const status = {
     expandable: Boolean(Array.isArray(children) ? children.length : children),
-    expanded: instance.isNodeExpanded(nodeId),
-    focused: instance.isNodeFocused(nodeId),
-    selected: instance.isNodeSelected(nodeId),
-    disabled: instance.isNodeDisabled(nodeId)
+    expanded: instance.isNodeExpanded(itemId),
+    focused: instance.isNodeFocused(itemId),
+    selected: instance.isNodeSelected(itemId),
+    disabled: instance.isNodeDisabled(itemId)
   };
   const handleExpansion = event => {
     if (status.disabled) {
       return;
     }
     if (!status.focused) {
-      instance.focusItem(event, nodeId);
+      instance.focusItem(event, itemId);
     }
     const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
     // If already expanded and trying to toggle selection don't close
-    if (status.expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
-      instance.toggleNodeExpansion(event, nodeId);
+    if (status.expandable && !(multiple && instance.isNodeExpanded(itemId))) {
+      instance.toggleNodeExpansion(event, itemId);
     }
   };
   const handleSelection = event => {
@@ -35,19 +35,19 @@ export const useTreeItem2Utils = ({
       return;
     }
     if (!status.focused) {
-      instance.focusItem(event, nodeId);
+      instance.focusItem(event, itemId);
     }
     const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
     if (multiple) {
       if (event.shiftKey) {
         instance.selectRange(event, {
-          end: nodeId
+          end: itemId
         });
       } else {
-        instance.selectNode(event, nodeId, true);
+        instance.selectNode(event, itemId, true);
       }
     } else {
-      instance.selectNode(event, nodeId);
+      instance.selectNode(event, itemId);
     }
   };
   const interactions = {

package/modern/index.js

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

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

@@ -11,10 +11,10 @@ export const useTreeViewExpansion = ({
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const isNodeExpanded = React.useCallback(nodeId => {
-    return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(nodeId) !== -1 : false;
+  const isNodeExpanded = React.useCallback(itemId => {
+    return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(itemId) !== -1 : false;
   }, [models.expandedItems.value]);
-  const isNodeExpandable = React.useCallback(nodeId => !!instance.getNode(nodeId)?.expandable, [instance]);
+  const isNodeExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
   const toggleNodeExpansion = useEventCallback((event, itemId) => {
     if (itemId == null) {
       return;
@@ -31,15 +31,15 @@ export const useTreeViewExpansion = ({
     }
     setExpandedItems(event, newExpanded);
   });
-  const expandAllSiblings = (event, nodeId) => {
-    const node = instance.getNode(nodeId);
+  const expandAllSiblings = (event, itemId) => {
+    const node = instance.getNode(itemId);
     const siblings = instance.getChildrenIds(node.parentId);
     const diff = siblings.filter(child => instance.isNodeExpandable(child) && !instance.isNodeExpanded(child));
     const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
       if (params.onItemExpansionToggle) {
-        diff.forEach(newlyExpandedNodeId => {
-          params.onItemExpansionToggle(event, newlyExpandedNodeId, true);
+        diff.forEach(newlyExpandedItemId => {
+          params.onItemExpansionToggle(event, newlyExpandedItemId, true);
         });
       }
       setExpandedItems(event, newExpanded);

package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -5,6 +5,22 @@ import ownerDocument from '@mui/utils/ownerDocument';
 import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
 import { getActiveElement } from '../../utils/utils';
+const useTabbableItemId = (instance, selectedItems) => {
+  const isItemVisible = itemId => {
+    const node = instance.getNode(itemId);
+    return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+  };
+  let tabbableItemId;
+  if (Array.isArray(selectedItems)) {
+    tabbableItemId = selectedItems.find(isItemVisible);
+  } else if (selectedItems != null && isItemVisible(selectedItems)) {
+    tabbableItemId = selectedItems;
+  }
+  if (tabbableItemId == null) {
+    tabbableItemId = instance.getNavigableChildrenIds(null)[0];
+  }
+  return tabbableItemId;
+};
 export const useTreeViewFocus = ({
   instance,
   publicAPI,
@@ -14,30 +30,36 @@ export const useTreeViewFocus = ({
   models,
   rootRef
 }) => {
-  const setFocusedNodeId = useEventCallback(nodeId => {
-    const cleanNodeId = typeof nodeId === 'function' ? nodeId(state.focusedNodeId) : nodeId;
-    if (state.focusedNodeId !== cleanNodeId) {
+  const tabbableItemId = useTabbableItemId(instance, models.selectedItems.value);
+  const setFocusedItemId = useEventCallback(itemId => {
+    const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedNodeId) : itemId;
+    if (state.focusedNodeId !== cleanItemId) {
       setState(prevState => _extends({}, prevState, {
-        focusedNodeId: cleanNodeId
+        focusedNodeId: cleanItemId
       }));
     }
   });
-  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current === getActiveElement(ownerDocument(rootRef.current)), [rootRef]);
-  const isNodeFocused = React.useCallback(nodeId => state.focusedNodeId === nodeId && isTreeViewFocused(), [state.focusedNodeId, isTreeViewFocused]);
-  const isNodeVisible = nodeId => {
-    const node = instance.getNode(nodeId);
+  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains(getActiveElement(ownerDocument(rootRef.current))), [rootRef]);
+  const isNodeFocused = React.useCallback(itemId => state.focusedNodeId === itemId && isTreeViewFocused(), [state.focusedNodeId, isTreeViewFocused]);
+  const isNodeVisible = itemId => {
+    const node = instance.getNode(itemId);
     return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
   };
+  const innerFocusItem = (event, itemId) => {
+    const node = instance.getNode(itemId);
+    const itemElement = document.getElementById(instance.getTreeItemId(itemId, node.idAttribute));
+    if (itemElement) {
+      itemElement.focus();
+    }
+    setFocusedItemId(itemId);
+    if (params.onItemFocus) {
+      params.onItemFocus(event, itemId);
+    }
+  };
   const focusItem = useEventCallback((event, nodeId) => {
-    // if we receive a nodeId, and it is visible, the focus will be set to it
-    if (nodeId && isNodeVisible(nodeId)) {
-      if (!isTreeViewFocused()) {
-        instance.focusRoot();
-      }
-      setFocusedNodeId(nodeId);
-      if (params.onItemFocus) {
-        params.onItemFocus(event, nodeId);
-      }
+    // If we receive a nodeId, and it is visible, the focus will be set to it
+    if (isNodeVisible(nodeId)) {
+      innerFocusItem(event, nodeId);
     }
   });
   const focusDefaultNode = useEventCallback(event => {
@@ -50,21 +72,26 @@ export const useTreeViewFocus = ({
     if (nodeToFocusId == null) {
       nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
     }
-    setFocusedNodeId(nodeToFocusId);
-    if (params.onItemFocus) {
-      params.onItemFocus(event, nodeToFocusId);
-    }
+    innerFocusItem(event, nodeToFocusId);
   });
-  const focusRoot = useEventCallback(() => {
-    rootRef.current?.focus({
-      preventScroll: true
-    });
+  const removeFocusedItem = useEventCallback(() => {
+    if (state.focusedNodeId == null) {
+      return;
+    }
+    const node = instance.getNode(state.focusedNodeId);
+    const itemElement = document.getElementById(instance.getTreeItemId(state.focusedNodeId, node.idAttribute));
+    if (itemElement) {
+      itemElement.blur();
+    }
+    setFocusedItemId(null);
   });
+  const canItemBeTabbed = itemId => itemId === tabbableItemId;
   populateInstance(instance, {
     isNodeFocused,
+    canItemBeTabbed,
     focusItem,
-    focusRoot,
-    focusDefaultNode
+    focusDefaultNode,
+    removeFocusedItem
   });
   populatePublicAPI(publicAPI, {
     focusItem
@@ -72,12 +99,9 @@ export const useTreeViewFocus = ({
   useInstanceEventHandler(instance, 'removeNode', ({
     id
   }) => {
-    setFocusedNodeId(oldFocusedNodeId => {
-      if (oldFocusedNodeId === id && rootRef.current === ownerDocument(rootRef.current).activeElement) {
-        return instance.getChildrenIds(null)[0];
-      }
-      return oldFocusedNodeId;
-    });
+    if (state.focusedNodeId === id) {
+      instance.focusDefaultNode(null);
+    }
   });
   const createHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
@@ -86,16 +110,11 @@ export const useTreeViewFocus = ({
       instance.focusDefaultNode(event);
     }
   };
-  const createHandleBlur = otherHandlers => event => {
-    otherHandlers.onBlur?.(event);
-    setFocusedNodeId(null);
-  };
   const focusedNode = instance.getNode(state.focusedNodeId);
   const activeDescendant = focusedNode ? instance.getTreeItemId(focusedNode.id, focusedNode.idAttribute) : null;
   return {
     getRootProps: otherHandlers => ({
       onFocus: createHandleFocus(otherHandlers),
-      onBlur: createHandleBlur(otherHandlers),
       'aria-activedescendant': activeDescendant ?? undefined
     })
   };

package/modern/internals/plugins/useTreeViewId/useTreeViewId.js

@@ -6,7 +6,7 @@ export const useTreeViewId = ({
   params
 }) => {
   const treeId = useId(params.id);
-  const getTreeItemId = React.useCallback((nodeId, idAttribute) => idAttribute ?? `${treeId}-${nodeId}`, [treeId]);
+  const getTreeItemId = React.useCallback((itemId, idAttribute) => idAttribute ?? `${treeId}-${itemId}`, [treeId]);
   populateInstance(instance, {
     getTreeItemId
   });

package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -32,12 +32,12 @@ export const useTreeViewJSXNodes = ({
       });
     });
   });
-  const removeJSXNode = useEventCallback(nodeId => {
+  const removeJSXNode = useEventCallback(itemId => {
     setState(prevState => {
       const newNodeMap = _extends({}, prevState.nodes.nodeMap);
       const newItemMap = _extends({}, prevState.nodes.itemMap);
-      delete newNodeMap[nodeId];
-      delete newItemMap[nodeId];
+      delete newNodeMap[itemId];
+      delete newItemMap[itemId];
       return _extends({}, prevState, {
         nodes: _extends({}, prevState.nodes, {
           nodeMap: newNodeMap,
@@ -46,18 +46,18 @@ export const useTreeViewJSXNodes = ({
       });
     });
     publishTreeViewEvent(instance, 'removeNode', {
-      id: nodeId
+      id: itemId
     });
   });
-  const mapFirstCharFromJSX = useEventCallback((nodeId, firstChar) => {
+  const mapFirstCharFromJSX = useEventCallback((itemId, firstChar) => {
     instance.updateFirstCharMap(firstCharMap => {
-      firstCharMap[nodeId] = firstChar;
+      firstCharMap[itemId] = firstChar;
       return firstCharMap;
     });
     return () => {
       instance.updateFirstCharMap(firstCharMap => {
         const newMap = _extends({}, firstCharMap);
-        delete newMap[nodeId];
+        delete newMap[itemId];
         return newMap;
       });
     };
@@ -77,7 +77,7 @@ const useTreeViewJSXNodesItemPlugin = ({
     children,
     disabled = false,
     label,
-    nodeId,
+    itemId,
     id
   } = props;
   const {
@@ -96,8 +96,8 @@ const useTreeViewJSXNodesItemPlugin = ({
   const handleContentRef = useForkRef(pluginContentRef, contentRef);
   const descendant = React.useMemo(() => ({
     element: treeItemElement,
-    id: nodeId
-  }), [nodeId, treeItemElement]);
+    id: itemId
+  }), [itemId, treeItemElement]);
   const {
     index,
     parentId
@@ -106,23 +106,23 @@ const useTreeViewJSXNodesItemPlugin = ({
     // On the first render a node's index will be -1. We want to wait for the real index.
     if (index !== -1) {
       instance.insertJSXNode({
-        id: nodeId,
+        id: itemId,
         idAttribute: id,
         index,
         parentId,
         expandable,
         disabled
       });
-      return () => instance.removeJSXNode(nodeId);
+      return () => instance.removeJSXNode(itemId);
     }
     return undefined;
-  }, [instance, parentId, index, nodeId, expandable, disabled, id]);
+  }, [instance, parentId, index, itemId, expandable, disabled, id]);
   React.useEffect(() => {
     if (label) {
-      return instance.mapFirstCharFromJSX(nodeId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
+      return instance.mapFirstCharFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
     }
     return undefined;
-  }, [instance, nodeId, label]);
+  }, [instance, itemId, label]);
   return {
     contentRef: handleContentRef,
     rootRef: handleRootRef
@@ -131,9 +131,9 @@ const useTreeViewJSXNodesItemPlugin = ({
 useTreeViewJSXNodes.itemPlugin = useTreeViewJSXNodesItemPlugin;
 useTreeViewJSXNodes.wrapItem = ({
   children,
-  nodeId
+  itemId
 }) => /*#__PURE__*/_jsx(DescendantProvider, {
-  id: nodeId,
+  id: itemId,
   children: children
 });
 useTreeViewJSXNodes.params = {};