@mui/x-tree-view 7.11.1 → 7.12.0

package/modern/TreeItem/useTreeItemState.js

@@ -1,7 +1,10 @@
-import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
+import { useTreeViewContext } from '../internals/TreeViewProvider';
 export function useTreeItemState(itemId) {
   const {
     instance,
+    items: {
+      onItemClick
+    },
     selection: {
       multiSelect,
       checkboxSelection,
@@ -86,6 +89,7 @@ export function useTreeItemState(itemId) {
     handleExpansion,
     handleSelection,
     handleCheckboxSelection,
+    handleContentClick: onItemClick,
     preventSelection,
     expansionTrigger
   };

package/modern/TreeItem2/TreeItem2.js

@@ -9,13 +9,14 @@ import unsupportedProp from '@mui/utils/unsupportedProp';
 import { alpha } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
 import MuiCheckbox from '@mui/material/Checkbox';
-import { useSlotProps } from '@mui/base/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
 import { shouldForwardProp } from '@mui/system/createStyled';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, createUseThemeProps } from '../internals/zero-styled';
 import { unstable_useTreeItem2 as useTreeItem2 } from '../useTreeItem2';
 import { getTreeItemUtilityClass } from '../TreeItem';
 import { TreeItem2Icon } from '../TreeItem2Icon';
+import { TreeItem2DragAndDropOverlay } from '../TreeItem2DragAndDropOverlay';
 import { TreeItem2Provider } from '../TreeItem2Provider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem2');
@@ -42,6 +43,7 @@ export const TreeItem2Content = styled('div', {
   width: '100%',
   boxSizing: 'border-box',
   // prevent width + padding to overflow
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1),
@@ -176,7 +178,8 @@ const useUtilityClasses = ownerState => {
     iconContainer: ['iconContainer'],
     checkbox: ['checkbox'],
     label: ['label'],
-    groupTransition: ['groupTransition']
+    groupTransition: ['groupTransition'],
+    dragAndDropOverlay: ['dragAndDropOverlay']
   };
   return composeClasses(slots, getTreeItemUtilityClass, classes);
 };
@@ -212,6 +215,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
+    getDragAndDropOverlayProps,
     status
   } = useTreeItem2({
     id,
@@ -274,6 +278,14 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     ownerState: {},
     className: classes.groupTransition
   });
+  const DragAndDropOverlay = slots.dragAndDropOverlay ?? TreeItem2DragAndDropOverlay;
+  const dragAndDropOverlayProps = useSlotProps({
+    elementType: DragAndDropOverlay,
+    getSlotProps: getDragAndDropOverlayProps,
+    externalSlotProps: slotProps.dragAndDropOverlay,
+    ownerState: {},
+    className: classes.dragAndDropOverlay
+  });
   return /*#__PURE__*/_jsx(TreeItem2Provider, {
     itemId: itemId,
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
@@ -284,7 +296,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
             slots: slots,
             slotProps: slotProps
           })
-        })), /*#__PURE__*/_jsx(Checkbox, _extends({}, checkboxProps)), /*#__PURE__*/_jsx(Label, _extends({}, labelProps))]
+        })), /*#__PURE__*/_jsx(Checkbox, _extends({}, checkboxProps)), /*#__PURE__*/_jsx(Label, _extends({}, labelProps)), /*#__PURE__*/_jsx(DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
       })), children && /*#__PURE__*/_jsx(TreeItem2GroupTransition, _extends({
         as: GroupTransition
       }, groupTransitionProps))]

package/modern/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system';
+import { styled } from '../internals/zero-styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TreeItem2DragAndDropOverlayRoot = styled('div', {
+  name: 'MuiTreeItem2DragAndDropOverlay',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'action'
+})(({
+  theme
+}) => ({
+  position: 'absolute',
+  left: 0,
+  display: 'flex',
+  top: 0,
+  bottom: 0,
+  right: 0,
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      action: 'make-child'
+    },
+    style: {
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
+      borderRadius: theme.shape.borderRadius,
+      backgroundColor: alpha((theme.vars || theme).palette.primary.dark, 0.15)
+    }
+  }, {
+    props: {
+      action: 'reorder-above'
+    },
+    style: _extends({
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
+      borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+    }, theme.palette.mode === 'dark' && {
+      borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[100], 0.6)}`
+    })
+  }, {
+    props: {
+      action: 'reorder-below'
+    },
+    style: _extends({
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
+      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+    }, theme.palette.mode === 'dark' && {
+      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[100], 0.6)}`
+    })
+  }, {
+    props: {
+      action: 'move-to-parent'
+    },
+    style: _extends({
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
+      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+    }, theme.palette.mode === 'dark' && {
+      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+    })
+  }]
+}));
+function TreeItem2DragAndDropOverlay(props) {
+  if (props.action == null) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlayRoot, _extends({}, props));
+}
+export { TreeItem2DragAndDropOverlay };

package/modern/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js

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

package/modern/TreeItem2DragAndDropOverlay/index.js

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

package/modern/TreeItem2Icon/TreeItem2Icon.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
-import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
+import resolveComponentProps from '@mui/utils/resolveComponentProps';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { useTreeViewContext } from '../internals/TreeViewProvider';
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 function TreeItem2Icon(props) {

package/modern/TreeItem2Provider/TreeItem2Provider.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
+import { useTreeViewContext } from '../internals/TreeViewProvider';
 function TreeItem2Provider(props) {
   const {
     children,

package/modern/TreeView/TreeView.js

@@ -155,6 +155,12 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: PropTypes.func,
+  /**
+   * Callback fired when the `content` slot of a given tree item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {string} itemId The id of the focused item.
+   */
+  onItemClick: PropTypes.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
@@ -163,10 +169,9 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   onItemExpansionToggle: PropTypes.func,
   /**
-   * Callback fired when tree items are focused.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
+   * Callback fired when a given tree item is focused.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
    * @param {string} itemId The id of the focused item.
-   * @param {string} value of the focused item.
    */
   onItemFocus: PropTypes.func,
   /**

package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -1,4 +1,4 @@
-import { useTreeViewContext } from '../../internals/TreeViewProvider/useTreeViewContext';
+import { useTreeViewContext } from '../../internals/TreeViewProvider';
 const isItemExpandable = reactChildren => {
   if (Array.isArray(reactChildren)) {
     return reactChildren.length > 0 && reactChildren.some(isItemExpandable);

package/modern/index.js

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

package/modern/internals/TreeViewProvider/index.js

@@ -1 +1,2 @@
-export { TreeViewProvider } from './TreeViewProvider';
+export { TreeViewProvider } from './TreeViewProvider';
+export { useTreeViewContext } from './useTreeViewContext';

package/modern/internals/index.js

@@ -1,5 +1,5 @@
 export { useTreeView } from './useTreeView';
-export { TreeViewProvider } from './TreeViewProvider';
+export { TreeViewProvider, useTreeViewContext } from './TreeViewProvider';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
 
 // Core plugins
@@ -10,6 +10,7 @@ export { useTreeViewSelection } from './plugins/useTreeViewSelection';
 export { useTreeViewFocus } from './plugins/useTreeViewFocus';
 export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavigation';
 export { useTreeViewIcons } from './plugins/useTreeViewIcons';
-export { useTreeViewItems } from './plugins/useTreeViewItems';
+export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './plugins/useTreeViewItems';
 export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';
+export { isTargetInDescendants } from './utils/tree';
 export { warnOnce } from './utils/warning';

package/modern/internals/models/index.js

@@ -1,4 +1,5 @@
 export * from './helpers';
 export * from './plugin';
 export * from './itemPlugin';
-export * from './treeView';
+export * from './treeView';
+export * from './MuiCancellableEvent';

package/modern/internals/plugins/useTreeViewItems/index.js

@@ -1 +1,2 @@
-export { useTreeViewItems } from './useTreeViewItems';
+export { useTreeViewItems } from './useTreeViewItems';
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';

package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -184,8 +184,11 @@ export const useTreeViewItems = ({
       areItemUpdatesPrevented
     },
     contextValue: {
-      disabledItemsFocusable: params.disabledItemsFocusable,
-      indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
+      items: {
+        onItemClick: params.onItemClick,
+        disabledItemsFocusable: params.disabledItemsFocusable,
+        indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
+      }
     }
   };
 };
@@ -216,5 +219,6 @@ useTreeViewItems.params = {
   isItemDisabled: true,
   getItemLabel: true,
   getItemId: true,
+  onItemClick: true,
   itemChildrenIndentation: true
 };

package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -4,7 +4,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
-import { useTreeViewContext } from '../../TreeViewProvider/useTreeViewContext';
+import { useTreeViewContext } from '../../TreeViewProvider';
 import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from '../../TreeViewProvider/TreeViewChildrenItemProvider';
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from '../useTreeViewItems/useTreeViewItems.utils';
 import { TreeViewItemDepthContext } from '../../TreeViewItemDepthContext';

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem } from '../../utils/tree';
+import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from '../../utils/tree';
 function isPrintableCharacter(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
@@ -60,7 +60,7 @@ export const useTreeViewKeyboardNavigation = ({
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (event.altKey || event.currentTarget !== event.target.closest('*[role="treeitem"]')) {
+    if (event.altKey || isTargetInDescendants(event.target, event.currentTarget)) {
       return;
     }
     const ctrlPressed = event.ctrlKey || event.metaKey;

package/modern/internals/utils/tree.js

@@ -181,4 +181,15 @@ export const getAllNavigableItems = instance => {
     item = getNextNavigableItem(instance, item);
   }
   return navigableItems;
+};
+
+/**
+ * Checks if the target is in a descendant of this item.
+ * This can prevent from firing some logic on the ancestors on the interacted item when the event handler is on the root.
+ * @param {HTMLElement} target The target to check
+ * @param {HTMLElement | null} itemRoot The root of the item to check if the event target is in its descendants
+ * @returns {boolean} Whether the target is in a descendant of this item
+ */
+export const isTargetInDescendants = (target, itemRoot) => {
+  return itemRoot !== target.closest('*[role="treeitem"]');
 };

package/modern/useTreeItem2/useTreeItem2.js

@@ -1,13 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { extractEventHandlers } from '@mui/base/utils';
+import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import useForkRef from '@mui/utils/useForkRef';
-import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
+import { useTreeViewContext } from '../internals/TreeViewProvider';
 import { useTreeItem2Utils } from '../hooks/useTreeItem2Utils';
 import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
 export const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
+    items: {
+      onItemClick,
+      disabledItemsFocusable,
+      indentationAtItemLevel
+    },
     selection: {
       multiSelect,
       disableSelection,
@@ -16,8 +21,6 @@ export const useTreeItem2 = parameters => {
     expansion: {
       expansionTrigger
     },
-    disabledItemsFocusable,
-    indentationAtItemLevel,
     instance,
     publicAPI
   } = useTreeViewContext();
@@ -31,7 +34,8 @@ export const useTreeItem2 = parameters => {
   } = parameters;
   const {
     rootRef: pluginRootRef,
-    contentRef
+    contentRef,
+    propsEnhancers
   } = runItemPlugins(parameters);
   const {
     interactions,
@@ -40,8 +44,11 @@ export const useTreeItem2 = parameters => {
     itemId,
     children
   });
+  const rootRefObject = React.useRef(null);
+  const contentRefObject = React.useRef(null);
   const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
-  const handleRootRef = useForkRef(rootRef, pluginRootRef);
+  const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
+  const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
@@ -69,6 +76,7 @@ export const useTreeItem2 = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
+    onItemClick?.(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
@@ -123,7 +131,7 @@ export const useTreeItem2 = parameters => {
        */
       ariaSelected = true;
     }
-    const response = _extends({}, externalEventHandlers, {
+    const props = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
       tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
@@ -137,24 +145,34 @@ export const useTreeItem2 = parameters => {
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
     if (indentationAtItemLevel) {
-      response.style = {
+      props.style = {
         '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
       };
     }
-    return response;
+    const enhancedRootProps = propsEnhancers.root?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return _extends({}, props, enhancedRootProps);
   };
   const getContentProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    const response = _extends({}, externalEventHandlers, externalProps, {
-      ref: contentRef,
+    const props = _extends({}, externalEventHandlers, externalProps, {
+      ref: handleContentRef,
       onClick: createContentHandleClick(externalEventHandlers),
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
     if (indentationAtItemLevel) {
-      response.indentationAtItemLevel = true;
-    }
-    return response;
+      props.indentationAtItemLevel = true;
+    }
+    const enhancedContentProps = propsEnhancers.content?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return _extends({}, props, enhancedContentProps);
   };
   const getCheckboxProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
@@ -169,7 +187,7 @@ export const useTreeItem2 = parameters => {
     });
   };
   const getLabelProps = (externalProps = {}) => {
-    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    const externalEventHandlers = _extends({}, extractEventHandlers(externalProps));
     return _extends({}, externalEventHandlers, {
       children: label
     }, externalProps);
@@ -194,6 +212,15 @@ export const useTreeItem2 = parameters => {
     }
     return response;
   };
+  const getDragAndDropOverlayProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(externalProps));
+    const enhancedDragAndDropOverlayProps = propsEnhancers.dragAndDropOverlay?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return _extends({}, externalProps, enhancedDragAndDropOverlayProps);
+  };
   return {
     getRootProps,
     getContentProps,
@@ -201,6 +228,7 @@ export const useTreeItem2 = parameters => {
     getIconContainerProps,
     getCheckboxProps,
     getLabelProps,
+    getDragAndDropOverlayProps,
     rootRef: handleRootRef,
     status,
     publicAPI

package/node/RichTreeView/RichTreeView.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _utils = require("@mui/base/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _richTreeViewClasses = require("./richTreeViewClasses");
 var _zeroStyled = require("../internals/zero-styled");
 var _useTreeView = require("../internals/useTreeView");
@@ -50,7 +50,7 @@ function WrappedTreeItem({
   children
 }) {
   const Item = slots?.item ?? _TreeItem.TreeItem;
-  const itemProps = (0, _utils.useSlotProps)({
+  const itemProps = (0, _useSlotProps.default)({
     elementType: Item,
     externalSlotProps: slotProps?.item,
     additionalProps: {
@@ -103,7 +103,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
   } = props;
   const classes = useUtilityClasses(props);
   const Root = slots?.root ?? RichTreeViewRoot;
-  const rootProps = (0, _utils.useSlotProps)({
+  const rootProps = (0, _useSlotProps.default)({
     elementType: Root,
     externalSlotProps: slotProps?.root,
     className: classes.root,
@@ -250,6 +250,12 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: _propTypes.default.func,
+  /**
+   * Callback fired when the `content` slot of a given tree item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {string} itemId The id of the focused item.
+   */
+  onItemClick: _propTypes.default.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
@@ -258,10 +264,9 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   onItemExpansionToggle: _propTypes.default.func,
   /**
-   * Callback fired when tree items are focused.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
+   * Callback fired when a given tree item is focused.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
    * @param {string} itemId The id of the focused item.
-   * @param {string} value of the focused item.
    */
   onItemFocus: _propTypes.default.func,
   /**

package/node/SimpleTreeView/SimpleTreeView.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _utils = require("@mui/base/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _zeroStyled = require("../internals/zero-styled");
 var _simpleTreeViewClasses = require("./simpleTreeViewClasses");
 var _useTreeView = require("../internals/useTreeView");
@@ -79,7 +79,7 @@ const SimpleTreeView = exports.SimpleTreeView = /*#__PURE__*/React.forwardRef(fu
   } = props;
   const classes = useUtilityClasses(props);
   const Root = slots?.root ?? SimpleTreeViewRoot;
-  const rootProps = (0, _utils.useSlotProps)({
+  const rootProps = (0, _useSlotProps.default)({
     elementType: Root,
     externalSlotProps: slotProps?.root,
     className: classes.root,
@@ -186,6 +186,12 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: _propTypes.default.func,
+  /**
+   * Callback fired when the `content` slot of a given tree item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {string} itemId The id of the focused item.
+   */
+  onItemClick: _propTypes.default.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
@@ -194,10 +200,9 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    */
   onItemExpansionToggle: _propTypes.default.func,
   /**
-   * Callback fired when tree items are focused.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
+   * Callback fired when a given tree item is focused.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
    * @param {string} itemId The id of the focused item.
-   * @param {string} value of the focused item.
    */
   onItemFocus: _propTypes.default.func,
   /**