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

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

@@ -7,42 +7,42 @@ export const useTreeViewExpansion = ({
   params,
   models
 }) => {
-  const setExpandedNodes = (event, value) => {
-    params.onExpandedNodesChange?.(event, value);
-    models.expandedNodes.setControlledValue(value);
+  const setExpandedItems = (event, value) => {
+    params.onExpandedItemsChange?.(event, value);
+    models.expandedItems.setControlledValue(value);
   };
-  const isNodeExpanded = React.useCallback(nodeId => {
-    return Array.isArray(models.expandedNodes.value) ? models.expandedNodes.value.indexOf(nodeId) !== -1 : false;
-  }, [models.expandedNodes.value]);
-  const isNodeExpandable = React.useCallback(nodeId => !!instance.getNode(nodeId)?.expandable, [instance]);
-  const toggleNodeExpansion = useEventCallback((event, nodeId) => {
-    if (nodeId == null) {
+  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(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
+  const toggleNodeExpansion = useEventCallback((event, itemId) => {
+    if (itemId == null) {
       return;
     }
-    const isExpandedBefore = models.expandedNodes.value.indexOf(nodeId) !== -1;
+    const isExpandedBefore = models.expandedItems.value.indexOf(itemId) !== -1;
     let newExpanded;
     if (isExpandedBefore) {
-      newExpanded = models.expandedNodes.value.filter(id => id !== nodeId);
+      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
     } else {
-      newExpanded = [nodeId].concat(models.expandedNodes.value);
+      newExpanded = [itemId].concat(models.expandedItems.value);
     }
-    if (params.onNodeExpansionToggle) {
-      params.onNodeExpansionToggle(event, nodeId, !isExpandedBefore);
+    if (params.onItemExpansionToggle) {
+      params.onItemExpansionToggle(event, itemId, !isExpandedBefore);
     }
-    setExpandedNodes(event, newExpanded);
+    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.expandedNodes.value.concat(diff);
+    const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
-      if (params.onNodeExpansionToggle) {
-        diff.forEach(newlyExpandedNodeId => {
-          params.onNodeExpansionToggle(event, newlyExpandedNodeId, true);
+      if (params.onItemExpansionToggle) {
+        diff.forEach(newlyExpandedItemId => {
+          params.onItemExpansionToggle(event, newlyExpandedItemId, true);
         });
       }
-      setExpandedNodes(event, newExpanded);
+      setExpandedItems(event, newExpanded);
     }
   };
   populateInstance(instance, {
@@ -53,17 +53,17 @@ export const useTreeViewExpansion = ({
   });
 };
 useTreeViewExpansion.models = {
-  expandedNodes: {
-    getDefaultValue: params => params.defaultExpandedNodes
+  expandedItems: {
+    getDefaultValue: params => params.defaultExpandedItems
   }
 };
 const DEFAULT_EXPANDED_NODES = [];
 useTreeViewExpansion.getDefaultizedParams = params => _extends({}, params, {
-  defaultExpandedNodes: params.defaultExpandedNodes ?? DEFAULT_EXPANDED_NODES
+  defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_NODES
 });
 useTreeViewExpansion.params = {
-  expandedNodes: true,
-  defaultExpandedNodes: true,
-  onExpandedNodesChange: true,
-  onNodeExpansionToggle: true
+  expandedItems: true,
+  defaultExpandedItems: true,
+  onExpandedItemsChange: true,
+  onItemExpansionToggle: true
 };

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,70 +30,78 @@ 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 focusNode = 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.onNodeFocus) {
-        params.onNodeFocus(event, nodeId);
-      }
+  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 (isNodeVisible(nodeId)) {
+      innerFocusItem(event, nodeId);
     }
   });
   const focusDefaultNode = useEventCallback(event => {
     let nodeToFocusId;
-    if (Array.isArray(models.selectedNodes.value)) {
-      nodeToFocusId = models.selectedNodes.value.find(isNodeVisible);
-    } else if (models.selectedNodes.value != null && isNodeVisible(models.selectedNodes.value)) {
-      nodeToFocusId = models.selectedNodes.value;
+    if (Array.isArray(models.selectedItems.value)) {
+      nodeToFocusId = models.selectedItems.value.find(isNodeVisible);
+    } else if (models.selectedItems.value != null && isNodeVisible(models.selectedItems.value)) {
+      nodeToFocusId = models.selectedItems.value;
     }
     if (nodeToFocusId == null) {
       nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
     }
-    setFocusedNodeId(nodeToFocusId);
-    if (params.onNodeFocus) {
-      params.onNodeFocus(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,
-    focusNode,
-    focusRoot,
-    focusDefaultNode
+    canItemBeTabbed,
+    focusItem,
+    focusDefaultNode,
+    removeFocusedItem
   });
   populatePublicAPI(publicAPI, {
-    focusNode
+    focusItem
   });
   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
     })
   };
@@ -104,5 +123,5 @@ useTreeViewFocus.getInitialState = () => ({
   focusedNodeId: null
 });
 useTreeViewFocus.params = {
-  onNodeFocus: true
+  onItemFocus: true
 };

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;
       });
     };
@@ -70,15 +70,15 @@ export const useTreeViewJSXNodes = ({
 };
 const useTreeViewJSXNodesItemPlugin = ({
   props,
-  ref
+  rootRef,
+  contentRef
 }) => {
   const {
     children,
     disabled = false,
     label,
-    nodeId,
-    id,
-    ContentProps: inContentProps
+    itemId,
+    id
   } = props;
   const {
     instance
@@ -91,12 +91,13 @@ const useTreeViewJSXNodesItemPlugin = ({
   };
   const expandable = isExpandable(children);
   const [treeItemElement, setTreeItemElement] = React.useState(null);
-  const contentRef = React.useRef(null);
-  const handleRef = useForkRef(setTreeItemElement, ref);
+  const pluginContentRef = React.useRef(null);
+  const handleRootRef = useForkRef(setTreeItemElement, rootRef);
+  const handleContentRef = useForkRef(pluginContentRef, contentRef);
   const descendant = React.useMemo(() => ({
     element: treeItemElement,
-    id: nodeId
-  }), [nodeId, treeItemElement]);
+    id: itemId
+  }), [itemId, treeItemElement]);
   const {
     index,
     parentId
@@ -105,35 +106,34 @@ 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, (contentRef.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 {
-    props: _extends({}, props, {
-      ContentProps: _extends({}, inContentProps, {
-        ref: contentRef
-      })
-    }),
-    ref: handleRef,
-    wrapItem: item => /*#__PURE__*/_jsx(DescendantProvider, {
-      id: nodeId,
-      children: item
-    })
+    contentRef: handleContentRef,
+    rootRef: handleRootRef
   };
 };
 useTreeViewJSXNodes.itemPlugin = useTreeViewJSXNodesItemPlugin;
+useTreeViewJSXNodes.wrapItem = ({
+  children,
+  itemId
+}) => /*#__PURE__*/_jsx(DescendantProvider, {
+  id: itemId,
+  children: children
+});
 useTreeViewJSXNodes.params = {};