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

package/modern/internals/useTreeView/useTreeView.utils.js

@@ -1,41 +1,41 @@
-export const getPreviousNode = (instance, nodeId) => {
-  const node = instance.getNode(nodeId);
-  const siblings = instance.getNavigableChildrenIds(node.parentId);
-  const nodeIndex = siblings.indexOf(nodeId);
-  if (nodeIndex === 0) {
-    return node.parentId;
+export const getPreviousNode = (instance, itemId) => {
+  const item = instance.getNode(itemId);
+  const siblings = instance.getNavigableChildrenIds(item.parentId);
+  const itemIndex = siblings.indexOf(itemId);
+  if (itemIndex === 0) {
+    return item.parentId;
   }
-  let currentNode = siblings[nodeIndex - 1];
-  while (instance.isNodeExpanded(currentNode) && instance.getNavigableChildrenIds(currentNode).length > 0) {
-    currentNode = instance.getNavigableChildrenIds(currentNode).pop();
+  let currentItem = siblings[itemIndex - 1];
+  while (instance.isNodeExpanded(currentItem) && instance.getNavigableChildrenIds(currentItem).length > 0) {
+    currentItem = instance.getNavigableChildrenIds(currentItem).pop();
   }
-  return currentNode;
+  return currentItem;
 };
-export const getNextNode = (instance, nodeId) => {
+export const getNextNode = (instance, itemId) => {
   // If expanded get first child
-  if (instance.isNodeExpanded(nodeId) && instance.getNavigableChildrenIds(nodeId).length > 0) {
-    return instance.getNavigableChildrenIds(nodeId)[0];
+  if (instance.isNodeExpanded(itemId) && instance.getNavigableChildrenIds(itemId).length > 0) {
+    return instance.getNavigableChildrenIds(itemId)[0];
   }
-  let node = instance.getNode(nodeId);
-  while (node != null) {
+  let item = instance.getNode(itemId);
+  while (item != null) {
     // Try to get next sibling
-    const siblings = instance.getNavigableChildrenIds(node.parentId);
-    const nextSibling = siblings[siblings.indexOf(node.id) + 1];
+    const siblings = instance.getNavigableChildrenIds(item.parentId);
+    const nextSibling = siblings[siblings.indexOf(item.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);
+    item = instance.getNode(item.parentId);
   }
   return null;
 };
 export const getLastNode = instance => {
-  let lastNode = instance.getNavigableChildrenIds(null).pop();
-  while (instance.isNodeExpanded(lastNode)) {
-    lastNode = instance.getNavigableChildrenIds(lastNode).pop();
+  let lastItem = instance.getNavigableChildrenIds(null).pop();
+  while (instance.isNodeExpanded(lastItem)) {
+    lastItem = instance.getNavigableChildrenIds(lastItem).pop();
   }
-  return lastNode;
+  return lastItem;
 };
 export const getFirstNode = instance => instance.getNavigableChildrenIds(null)[0];
 export const populateInstance = (instance, methods) => {

package/modern/internals/utils/utils.js

@@ -1,3 +1,4 @@
+// https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
 export const getActiveElement = (root = document) => {
   const activeEl = root.activeElement;
   if (!activeEl) {

package/modern/useTreeItem2/index.js

@@ -0,0 +1 @@
+export { useTreeItem2 as unstable_useTreeItem2 } from './useTreeItem2';

package/modern/useTreeItem2/useTreeItem2.js

@@ -0,0 +1,146 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { extractEventHandlers } from '@mui/base/utils';
+import useForkRef from '@mui/utils/useForkRef';
+import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
+import { useTreeItem2Utils } from '../hooks/useTreeItem2Utils';
+export const useTreeItem2 = parameters => {
+  const {
+    runItemPlugins,
+    selection: {
+      multiSelect
+    },
+    disabledItemsFocusable,
+    instance,
+    publicAPI
+  } = useTreeViewContext();
+  const {
+    id,
+    itemId,
+    label,
+    children,
+    rootRef
+  } = parameters;
+  const {
+    rootRef: pluginRootRef,
+    contentRef
+  } = runItemPlugins(parameters);
+  const {
+    interactions,
+    status
+  } = useTreeItem2Utils({
+    itemId,
+    children
+  });
+  const idAttribute = instance.getTreeItemId(itemId, id);
+  const handleRootRef = useForkRef(rootRef, pluginRootRef);
+  const createRootHandleFocus = otherHandlers => event => {
+    otherHandlers.onFocus?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    const canBeFocused = !status.disabled || disabledItemsFocusable;
+    if (!status.focused && canBeFocused && event.currentTarget === event.target) {
+      instance.focusItem(event, itemId);
+    }
+  };
+  const createRootHandleBlur = otherHandlers => event => {
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    instance.removeFocusedItem();
+  };
+  const createRootHandleKeyDown = otherHandlers => event => {
+    otherHandlers.onKeyDown?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    instance.handleItemKeyDown(event, itemId);
+  };
+  const createContentHandleClick = otherHandlers => event => {
+    otherHandlers.onClick?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    interactions.handleExpansion(event);
+    interactions.handleSelection(event);
+  };
+  const createContentHandleMouseDown = otherHandlers => event => {
+    otherHandlers.onMouseDown?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+
+    // Prevent text selection
+    if (event.shiftKey || event.ctrlKey || event.metaKey || status.disabled) {
+      event.preventDefault();
+    }
+  };
+  const getRootProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    let ariaSelected;
+    if (multiSelect) {
+      ariaSelected = status.selected;
+    } else if (status.selected) {
+      /* single-selection trees unset aria-selected on un-selected items.
+       *
+       * If the tree does not support multiple selection, aria-selected
+       * is set to true for the selected item and it is not present on any other item in the tree.
+       * Source: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+       */
+      ariaSelected = true;
+    }
+    return _extends({}, externalEventHandlers, {
+      ref: handleRootRef,
+      role: 'treeitem',
+      tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
+      id: idAttribute,
+      'aria-expanded': status.expandable ? status.expanded : undefined,
+      'aria-selected': ariaSelected,
+      'aria-disabled': status.disabled || undefined
+    }, externalProps, {
+      onFocus: createRootHandleFocus(externalEventHandlers),
+      onBlur: createRootHandleBlur(externalEventHandlers),
+      onKeyDown: createRootHandleKeyDown(externalEventHandlers)
+    });
+  };
+  const getContentProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    return _extends({}, externalEventHandlers, externalProps, {
+      ref: contentRef,
+      onClick: createContentHandleClick(externalEventHandlers),
+      onMouseDown: createContentHandleMouseDown(externalEventHandlers),
+      status
+    });
+  };
+  const getLabelProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    return _extends({}, externalEventHandlers, {
+      children: label
+    }, externalProps);
+  };
+  const getIconContainerProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    return _extends({}, externalEventHandlers, externalProps);
+  };
+  const getGroupTransitionProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    return _extends({}, externalEventHandlers, {
+      unmountOnExit: true,
+      component: 'ul',
+      role: 'group',
+      in: status.expanded,
+      children
+    }, externalProps);
+  };
+  return {
+    getRootProps,
+    getContentProps,
+    getGroupTransitionProps,
+    getIconContainerProps,
+    getLabelProps,
+    rootRef: handleRootRef,
+    status,
+    publicAPI
+  };
+};

package/modern/useTreeItem2/useTreeItem2.types.js

@@ -0,0 +1 @@
+export {};

package/node/RichTreeView/RichTreeView.js

@@ -45,7 +45,7 @@ function WrappedTreeItem({
   slotProps,
   label,
   id,
-  nodeId,
+  itemId,
   children
 }) {
   const Item = slots?.item ?? _TreeItem.TreeItem;
@@ -53,12 +53,12 @@ function WrappedTreeItem({
     elementType: Item,
     externalSlotProps: slotProps?.item,
     additionalProps: {
-      nodeId,
+      itemId,
       id,
       label
     },
     ownerState: {
-      nodeId,
+      itemId,
       label
     }
   });
@@ -66,7 +66,7 @@ function WrappedTreeItem({
     children: children
   }));
 }
-const childrenWarning = (0, _warning.buildWarning)(['MUI X: The `RichTreeView` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop', 'Check the documentation for more details: https://next.mui.com/x/react-tree-view/rich-tree-view/items/']);
+const childrenWarning = (0, _warning.buildWarning)(['MUI X: The `RichTreeView` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
 
 /**
  *
@@ -116,7 +116,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
   const nodesToRender = instance.getNodesToRender();
   const renderNode = ({
     label,
-    nodeId,
+    itemId,
     id,
     children
   }) => {
@@ -125,9 +125,9 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
       slotProps: slotProps,
       label: label,
       id: id,
-      nodeId: nodeId,
+      itemId: itemId,
       children: children?.map(renderNode)
-    }, nodeId);
+    }, itemId);
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
     value: contextValue,
@@ -146,7 +146,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
-      focusNode: _propTypes.default.func.isRequired,
+      focusItem: _propTypes.default.func.isRequired,
       getItem: _propTypes.default.func.isRequired
     })
   }),
@@ -156,17 +156,17 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is not controlled.
    * @default []
    */
-  defaultExpandedNodes: _propTypes.default.arrayOf(_propTypes.default.string),
+  defaultExpandedItems: _propTypes.default.arrayOf(_propTypes.default.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.default.any,
+  defaultSelectedItems: _propTypes.default.any,
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
@@ -178,10 +178,10 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   disableSelection: _propTypes.default.bool,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is controlled.
    */
-  expandedNodes: _propTypes.default.arrayOf(_propTypes.default.string),
+  expandedItems: _propTypes.default.arrayOf(_propTypes.default.string),
   /**
    * Used to determine the string label for a given item.
    *
@@ -221,42 +221,42 @@ process.env.NODE_ENV !== "production" ? RichTreeView.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.default.func,
+  onExpandedItemsChange: _propTypes.default.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.default.func,
+  onItemExpansionToggle: _propTypes.default.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.default.func,
+  onItemFocus: _propTypes.default.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.default.func,
+  onItemSelectionToggle: _propTypes.default.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.default.func,
+  onSelectedItemsChange: _propTypes.default.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.default.any,
+  selectedItems: _propTypes.default.any,
   /**
    * The props used for each component slot.
    * @default {}

package/node/SimpleTreeView/SimpleTreeView.js

@@ -40,7 +40,7 @@ const SimpleTreeViewRoot = exports.SimpleTreeViewRoot = (0, _styles.styled)('ul'
   outline: 0
 });
 const EMPTY_ITEMS = [];
-const itemsPropWarning = (0, _warning.buildWarning)(['MUI X: The `SimpleTreeView` component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://next.mui.com/x/react-tree-view/simple-tree-view/items/']);
+const itemsPropWarning = (0, _warning.buildWarning)(['MUI X: The `SimpleTreeView` component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/']);
 
 /**
  *
@@ -104,7 +104,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    */
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
-      focusNode: _propTypes.default.func.isRequired,
+      focusItem: _propTypes.default.func.isRequired,
       getItem: _propTypes.default.func.isRequired
     })
   }),
@@ -118,17 +118,17 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is not controlled.
    * @default []
    */
-  defaultExpandedNodes: _propTypes.default.arrayOf(_propTypes.default.string),
+  defaultExpandedItems: _propTypes.default.arrayOf(_propTypes.default.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.default.any,
+  defaultSelectedItems: _propTypes.default.any,
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
@@ -140,10 +140,10 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    */
   disableSelection: _propTypes.default.bool,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is controlled.
    */
-  expandedNodes: _propTypes.default.arrayOf(_propTypes.default.string),
+  expandedItems: _propTypes.default.arrayOf(_propTypes.default.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.
@@ -157,42 +157,42 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.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.default.func,
+  onExpandedItemsChange: _propTypes.default.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.default.func,
+  onItemExpansionToggle: _propTypes.default.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.default.func,
+  onItemFocus: _propTypes.default.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.default.func,
+  onItemSelectionToggle: _propTypes.default.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.default.func,
+  onSelectedItemsChange: _propTypes.default.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.default.any,
+  selectedItems: _propTypes.default.any,
   /**
    * The props used for each component slot.
    */