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

package/modern/TreeView/TreeView.js

@@ -69,7 +69,7 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
-      focusNode: PropTypes.func.isRequired,
+      focusItem: PropTypes.func.isRequired,
       getItem: PropTypes.func.isRequired
     })
   }),
@@ -83,17 +83,17 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is not controlled.
    * @default []
    */
-  defaultExpandedNodes: PropTypes.arrayOf(PropTypes.string),
+  defaultExpandedItems: PropTypes.arrayOf(PropTypes.string),
   /**
-   * Selected node ids. (Uncontrolled)
+   * Selected item ids. (Uncontrolled)
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    * @default []
    */
-  defaultSelectedNodes: PropTypes.any,
+  defaultSelectedItems: PropTypes.any,
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
@@ -105,10 +105,10 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   disableSelection: PropTypes.bool,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is controlled.
    */
-  expandedNodes: PropTypes.arrayOf(PropTypes.string),
+  expandedItems: PropTypes.arrayOf(PropTypes.string),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -122,42 +122,42 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
   /**
    * Callback fired when tree items are expanded/collapsed.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeIds The ids of the expanded nodes.
+   * @param {array} itemIds The ids of the expanded items.
    */
-  onExpandedNodesChange: PropTypes.func,
+  onExpandedItemsChange: PropTypes.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeId The nodeId of the modified node.
-   * @param {array} isExpanded `true` if the node has just been expanded, `false` if it has just been collapsed.
+   * @param {array} itemId The itemId of the modified item.
+   * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
-  onNodeExpansionToggle: PropTypes.func,
+  onItemExpansionToggle: PropTypes.func,
   /**
    * Callback fired when tree items are focused.
    * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
-   * @param {string} nodeId The id of the node focused.
-   * @param {string} value of the focused node.
+   * @param {string} itemId The id of the focused item.
+   * @param {string} value of the focused item.
    */
-  onNodeFocus: PropTypes.func,
+  onItemFocus: PropTypes.func,
   /**
    * Callback fired when a tree item is selected or deselected.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeId The nodeId of the modified node.
-   * @param {array} isSelected `true` if the node has just been selected, `false` if it has just been deselected.
+   * @param {array} itemId The itemId of the modified item.
+   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
-  onNodeSelectionToggle: PropTypes.func,
+  onItemSelectionToggle: PropTypes.func,
   /**
    * Callback fired when tree items are selected/deselected.
    * @param {React.SyntheticEvent} event The event source of the callback
-   * @param {string[] | string} nodeIds The ids of the selected nodes.
+   * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */
-  onSelectedNodesChange: PropTypes.func,
+  onSelectedItemsChange: PropTypes.func,
   /**
-   * Selected node ids. (Controlled)
+   * Selected item ids. (Controlled)
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
-  selectedNodes: PropTypes.any,
+  selectedItems: PropTypes.any,
   /**
    * The props used for each component slot.
    */

package/modern/hooks/index.js

@@ -1 +1,2 @@
-export { useTreeViewApiRef } from './useTreeViewApiRef';
+export { useTreeViewApiRef } from './useTreeViewApiRef';
+export { useTreeItem2Utils } from './useTreeItem2Utils';

package/modern/hooks/useTreeItem2Utils/index.js

@@ -0,0 +1 @@
+export { useTreeItem2Utils } from './useTreeItem2Utils';

package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -0,0 +1,61 @@
+import { useTreeViewContext } from '../../internals/TreeViewProvider/useTreeViewContext';
+export const useTreeItem2Utils = ({
+  nodeId,
+  children
+}) => {
+  const {
+    instance,
+    selection: {
+      multiSelect
+    }
+  } = 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)
+  };
+  const handleExpansion = event => {
+    if (status.disabled) {
+      return;
+    }
+    if (!status.focused) {
+      instance.focusItem(event, nodeId);
+    }
+    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);
+    }
+  };
+  const handleSelection = event => {
+    if (status.disabled) {
+      return;
+    }
+    if (!status.focused) {
+      instance.focusItem(event, nodeId);
+    }
+    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    if (multiple) {
+      if (event.shiftKey) {
+        instance.selectRange(event, {
+          end: nodeId
+        });
+      } else {
+        instance.selectNode(event, nodeId, true);
+      }
+    } else {
+      instance.selectNode(event, nodeId);
+    }
+  };
+  const interactions = {
+    handleExpansion,
+    handleSelection
+  };
+  return {
+    interactions,
+    status
+  };
+};

package/modern/index.js

@@ -1,14 +1,21 @@
 /**
- * @mui/x-tree-view v7.0.0-beta.6
+ * @mui/x-tree-view v7.0.0-beta.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export * from './TreeItem';
+// Tree View
 export * from './TreeView';
 export * from './SimpleTreeView';
 export * from './RichTreeView';
+
+// Tree Item
+export * from './TreeItem';
+export * from './TreeItem2';
+export * from './useTreeItem2';
+export * from './TreeItem2Icon';
+export * from './TreeItem2Provider';
 export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
 export * from './models';
 export * from './icons';

package/modern/internals/hooks/useLazyRef.js

@@ -1,11 +1 @@
-import * as React from 'react';
-const UNINITIALIZED = {};
-
-// See https://github.com/facebook/react/issues/14490 for when to use this.
-export function useLazyRef(init, initArg) {
-  const ref = React.useRef(UNINITIALIZED);
-  if (ref.current === UNINITIALIZED) {
-    ref.current = init(initArg);
-  }
-  return ref;
-}
+export { default as useLazyRef } from '@mui/utils/useLazyRef';

package/modern/internals/hooks/useOnMount.js

@@ -1,7 +1 @@
-import * as React from 'react';
-const EMPTY = [];
-export function useOnMount(fn) {
-  /* eslint-disable react-hooks/exhaustive-deps */
-  React.useEffect(fn, EMPTY);
-  /* eslint-enable react-hooks/exhaustive-deps */
-}
+export { default as useOnMount } from '@mui/utils/useOnMount';

package/modern/internals/hooks/useTimeout.js

@@ -1,36 +1 @@
-'use client';
-
-import { useLazyRef } from './useLazyRef';
-import { useOnMount } from './useOnMount';
-export class Timeout {
-  constructor() {
-    this.currentId = null;
-    this.clear = () => {
-      if (this.currentId !== null) {
-        clearTimeout(this.currentId);
-        this.currentId = null;
-      }
-    };
-    this.disposeEffect = () => {
-      return this.clear;
-    };
-  }
-  static create() {
-    return new Timeout();
-  }
-  /**
-   * Executes `fn` after `delay`, clearing any previously scheduled call.
-   */
-  start(delay, fn) {
-    this.clear();
-    this.currentId = setTimeout(() => {
-      this.currentId = null;
-      fn();
-    }, delay);
-  }
-}
-export function useTimeout() {
-  const timeout = useLazyRef(Timeout.create).current;
-  useOnMount(timeout.disposeEffect);
-  return timeout;
-}
+export { default as useTimeout } from '@mui/utils/useTimeout';

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]);
+    return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(nodeId) !== -1 : false;
+  }, [models.expandedItems.value]);
   const isNodeExpandable = React.useCallback(nodeId => !!instance.getNode(nodeId)?.expandable, [instance]);
-  const toggleNodeExpansion = useEventCallback((event, nodeId) => {
-    if (nodeId == null) {
+  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 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) {
+      if (params.onItemExpansionToggle) {
         diff.forEach(newlyExpandedNodeId => {
-          params.onNodeExpansionToggle(event, newlyExpandedNodeId, true);
+          params.onItemExpansionToggle(event, newlyExpandedNodeId, 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

@@ -28,31 +28,31 @@ export const useTreeViewFocus = ({
     const node = instance.getNode(nodeId);
     return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
   };
-  const focusNode = useEventCallback((event, nodeId) => {
+  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.onNodeFocus) {
-        params.onNodeFocus(event, nodeId);
+      if (params.onItemFocus) {
+        params.onItemFocus(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);
+    if (params.onItemFocus) {
+      params.onItemFocus(event, nodeToFocusId);
     }
   });
   const focusRoot = useEventCallback(() => {
@@ -62,12 +62,12 @@ export const useTreeViewFocus = ({
   });
   populateInstance(instance, {
     isNodeFocused,
-    focusNode,
+    focusItem,
     focusRoot,
     focusDefaultNode
   });
   populatePublicAPI(publicAPI, {
-    focusNode
+    focusItem
   });
   useInstanceEventHandler(instance, 'removeNode', ({
     id
@@ -104,5 +104,5 @@ useTreeViewFocus.getInitialState = () => ({
   focusedNodeId: null
 });
 useTreeViewFocus.params = {
-  onNodeFocus: true
+  onItemFocus: true
 };

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

@@ -70,15 +70,15 @@ export const useTreeViewJSXNodes = ({
 };
 const useTreeViewJSXNodesItemPlugin = ({
   props,
-  ref
+  rootRef,
+  contentRef
 }) => {
   const {
     children,
     disabled = false,
     label,
     nodeId,
-    id,
-    ContentProps: inContentProps
+    id
   } = props;
   const {
     instance
@@ -91,8 +91,9 @@ 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
@@ -118,22 +119,21 @@ const useTreeViewJSXNodesItemPlugin = ({
   }, [instance, parentId, index, nodeId, expandable, disabled, id]);
   React.useEffect(() => {
     if (label) {
-      return instance.mapFirstCharFromJSX(nodeId, (contentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
+      return instance.mapFirstCharFromJSX(nodeId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
     }
     return undefined;
   }, [instance, nodeId, 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,
+  nodeId
+}) => /*#__PURE__*/_jsx(DescendantProvider, {
+  id: nodeId,
+  children: children
+});
 useTreeViewJSXNodes.params = {};

package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -81,7 +81,9 @@ export const useTreeViewKeyboardNavigation = ({
     return null;
   };
   const canToggleNodeSelection = nodeId => !params.disableSelection && !instance.isNodeDisabled(nodeId);
-  const canToggleNodeExpansion = nodeId => !instance.isNodeDisabled(nodeId) && instance.isNodeExpandable(nodeId);
+  const canToggleNodeExpansion = nodeId => {
+    return !instance.isNodeDisabled(nodeId) && instance.isNodeExpandable(nodeId);
+  };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
   const createHandleKeyDown = otherHandlers => event => {
@@ -90,7 +92,7 @@ export const useTreeViewKeyboardNavigation = ({
       return;
     }
 
-    // If the tree is empty there will be no focused node
+    // If the tree is empty, there will be no focused node
     if (event.altKey || event.currentTarget !== event.target || state.focusedNodeId == null) {
       return;
     }
@@ -140,7 +142,7 @@ export const useTreeViewKeyboardNavigation = ({
           const nextNode = getNextNode(instance, state.focusedNodeId);
           if (nextNode) {
             event.preventDefault();
-            instance.focusNode(event, nextNode);
+            instance.focusItem(event, nextNode);
 
             // Multi select behavior when pressing Shift + ArrowDown
             // Toggles the selection state of the next node
@@ -160,7 +162,7 @@ export const useTreeViewKeyboardNavigation = ({
           const previousNode = getPreviousNode(instance, state.focusedNodeId);
           if (previousNode) {
             event.preventDefault();
-            instance.focusNode(event, previousNode);
+            instance.focusItem(event, previousNode);
 
             // Multi select behavior when pressing Shift + ArrowUp
             // Toggles the selection state of the previous node
@@ -179,7 +181,7 @@ export const useTreeViewKeyboardNavigation = ({
       case key === 'ArrowRight' && !isRTL || key === 'ArrowLeft' && isRTL:
         {
           if (instance.isNodeExpanded(state.focusedNodeId)) {
-            instance.focusNode(event, getNextNode(instance, state.focusedNodeId));
+            instance.focusItem(event, getNextNode(instance, state.focusedNodeId));
             event.preventDefault();
           } else if (canToggleNodeExpansion(state.focusedNodeId)) {
             instance.toggleNodeExpansion(event, state.focusedNodeId);
@@ -198,7 +200,7 @@ export const useTreeViewKeyboardNavigation = ({
           } else {
             const parent = instance.getNode(state.focusedNodeId).parentId;
             if (parent) {
-              instance.focusNode(event, parent);
+              instance.focusItem(event, parent);
               event.preventDefault();
             }
           }
@@ -208,7 +210,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the first node in the tree
       case key === 'Home':
         {
-          instance.focusNode(event, getFirstNode(instance));
+          instance.focusItem(event, getFirstNode(instance));
 
           // Multi select behavior when pressing Ctrl + Shift + Home
           // Selects the focused node and all nodes up to the first node.
@@ -222,7 +224,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the last node in the tree
       case key === 'End':
         {
-          instance.focusNode(event, getLastNode(instance));
+          instance.focusItem(event, getLastNode(instance));
 
           // Multi select behavior when pressing Ctrl + Shirt + End
           // Selects the focused node and all the nodes down to the last node.
@@ -259,7 +261,7 @@ export const useTreeViewKeyboardNavigation = ({
         {
           const matchingNode = getFirstMatchingNode(state.focusedNodeId, key);
           if (matchingNode != null) {
-            instance.focusNode(event, matchingNode);
+            instance.focusItem(event, matchingNode);
             event.preventDefault();
           }
           break;

package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -103,7 +103,7 @@ export const useTreeViewNodes = ({
       });
     });
   }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
-  const getNodesToRender = useEventCallback(() => {
+  const getNodesToRender = () => {
     const getPropsFromNodeId = ({
       id,
       children
@@ -117,7 +117,7 @@ export const useTreeViewNodes = ({
       };
     };
     return state.nodes.nodeTree.map(getPropsFromNodeId);
-  });
+  };
   populateInstance(instance, {
     getNode,
     getItem,