@mui/x-tree-view 7.7.0 → 7.8.0

package/modern/useTreeItem2/useTreeItem2.js

@@ -13,6 +13,9 @@ export const useTreeItem2 = parameters => {
       disableSelection,
       checkboxSelection
     },
+    expansion: {
+      expansionTrigger
+    },
     disabledItemsFocusable,
     indentationAtItemLevel,
     instance,
@@ -69,7 +72,9 @@ export const useTreeItem2 = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    interactions.handleExpansion(event);
+    if (expansionTrigger === 'content') {
+      interactions.handleExpansion(event);
+    }
     if (!checkboxSelection) {
       interactions.handleSelection(event);
     }
@@ -95,6 +100,15 @@ export const useTreeItem2 = parameters => {
     }
     interactions.handleCheckboxSelection(event);
   };
+  const createIconContainerHandleClick = otherHandlers => event => {
+    otherHandlers.onClick?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (expansionTrigger === 'iconContainer') {
+      interactions.handleExpansion(event);
+    }
+  };
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
     let ariaSelected;
@@ -162,7 +176,9 @@ export const useTreeItem2 = parameters => {
   };
   const getIconContainerProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    return _extends({}, externalEventHandlers, externalProps);
+    return _extends({}, externalEventHandlers, externalProps, {
+      onClick: createIconContainerHandleClick(externalEventHandlers)
+    });
   };
   const getGroupTransitionProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);

package/node/RichTreeView/RichTreeView.js

@@ -186,6 +186,11 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: _propTypes.default.arrayOf(_propTypes.default.string),
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger: _propTypes.default.oneOf(['content', 'iconContainer']),
   /**
    * Unstable features, breaking changes might be introduced.
    * For each feature, if the flag is not explicitly set to `true`,

package/node/RichTreeView/RichTreeView.plugins.js

@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RICH_TREE_VIEW_PLUGINS = void 0;
-var _useTreeViewId = require("../internals/plugins/useTreeViewId");
 var _useTreeViewItems = require("../internals/plugins/useTreeViewItems");
 var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection");
 var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("../internals/plugins/useTreeViewKeyboardNavigation");
 var _useTreeViewIcons = require("../internals/plugins/useTreeViewIcons");
-const RICH_TREE_VIEW_PLUGINS = exports.RICH_TREE_VIEW_PLUGINS = [_useTreeViewId.useTreeViewId, _useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons];
+const RICH_TREE_VIEW_PLUGINS = exports.RICH_TREE_VIEW_PLUGINS = [_useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/node/SimpleTreeView/SimpleTreeView.js

@@ -148,6 +148,11 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: _propTypes.default.arrayOf(_propTypes.default.string),
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger: _propTypes.default.oneOf(['content', 'iconContainer']),
   /**
    * Unstable features, breaking changes might be introduced.
    * For each feature, if the flag is not explicitly set to `true`,

package/node/SimpleTreeView/SimpleTreeView.plugins.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SIMPLE_TREE_VIEW_PLUGINS = void 0;
-var _useTreeViewId = require("../internals/plugins/useTreeViewId");
 var _useTreeViewItems = require("../internals/plugins/useTreeViewItems");
 var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection");
@@ -12,6 +11,6 @@ var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("../internals/plugins/useTreeViewKeyboardNavigation");
 var _useTreeViewIcons = require("../internals/plugins/useTreeViewIcons");
 var _useTreeViewJSXItems = require("../internals/plugins/useTreeViewJSXItems");
-const SIMPLE_TREE_VIEW_PLUGINS = exports.SIMPLE_TREE_VIEW_PLUGINS = [_useTreeViewId.useTreeViewId, _useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons, _useTreeViewJSXItems.useTreeViewJSXItems];
+const SIMPLE_TREE_VIEW_PLUGINS = exports.SIMPLE_TREE_VIEW_PLUGINS = [_useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons, _useTreeViewJSXItems.useTreeViewJSXItems];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/node/TreeItem/TreeItem.js

@@ -25,6 +25,7 @@ var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewCont
 var _icons = require("../icons");
 var _TreeItem2Provider = require("../TreeItem2Provider");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
+var _useTreeItemState = require("./useTreeItemState");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "itemId", "id", "label", "onClick", "onMouseDown", "onFocus", "onBlur", "onKeyDown"],
   _excluded2 = ["ownerState"],
@@ -177,6 +178,9 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     selection: {
       multiSelect
     },
+    expansion: {
+      expansionTrigger
+    },
     disabledItemsFocusable,
     indentationAtItemLevel,
     instance
@@ -202,6 +206,13 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       onKeyDown
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    expanded,
+    focused,
+    selected,
+    disabled,
+    handleExpansion
+  } = (0, _useTreeItemState.useTreeItemState)(itemId);
   const {
     contentRef,
     rootRef
@@ -222,10 +233,6 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     return Boolean(reactChildren);
   };
   const expandable = isExpandable(children);
-  const expanded = instance.isItemExpanded(itemId);
-  const focused = instance.isItemFocused(itemId);
-  const selected = instance.isItemSelected(itemId);
-  const disabled = instance.isItemDisabled(itemId);
   const ownerState = (0, _extends2.default)({}, props, {
     expanded,
     focused,
@@ -249,6 +256,11 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     } : {}),
     className: classes.groupTransition
   });
+  const handleIconContainerClick = event => {
+    if (expansionTrigger === 'iconContainer') {
+      handleExpansion(event);
+    }
+  };
   const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
   const _useSlotProps = (0, _utils.useSlotProps)({
       elementType: ExpansionIcon,
@@ -258,6 +270,9 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
           return (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(contextIcons.slotProps.collapseIcon, tempOwnerState), (0, _utils.resolveComponentProps)(inSlotProps?.collapseIcon, tempOwnerState));
         }
         return (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(contextIcons.slotProps.expandIcon, tempOwnerState), (0, _utils.resolveComponentProps)(inSlotProps?.expandIcon, tempOwnerState));
+      },
+      additionalProps: {
+        onClick: handleIconContainerClick
       }
     }),
     expansionIconProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);

package/node/TreeItem/TreeItemContent.js

@@ -42,7 +42,8 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     handleExpansion,
     handleSelection,
     handleCheckboxSelection,
-    preventSelection
+    preventSelection,
+    expansionTrigger
   } = (0, _useTreeItemState.useTreeItemState)(itemId);
   const icon = iconProp || expansionIcon || displayIcon;
   const checkboxRef = React.useRef(null);
@@ -56,7 +57,9 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     if (checkboxRef.current?.contains(event.target)) {
       return;
     }
-    handleExpansion(event);
+    if (expansionTrigger === 'content') {
+      handleExpansion(event);
+    }
     if (!checkboxSelection) {
       handleSelection(event);
     }

package/node/TreeItem/useTreeItemState.js

@@ -12,6 +12,9 @@ function useTreeItemState(itemId) {
       multiSelect,
       checkboxSelection,
       disableSelection
+    },
+    expansion: {
+      expansionTrigger
     }
   } = (0, _useTreeViewContext.useTreeViewContext)();
   const expandable = instance.isItemExpandable(itemId);
@@ -76,6 +79,7 @@ function useTreeItemState(itemId) {
     handleExpansion,
     handleSelection,
     handleCheckboxSelection,
-    preventSelection
+    preventSelection,
+    expansionTrigger
   };
 }

package/node/TreeView/TreeView.js

@@ -125,6 +125,11 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: _propTypes.default.arrayOf(_propTypes.default.string),
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger: _propTypes.default.oneOf(['content', 'iconContainer']),
   /**
    * Unstable features, breaking changes might be introduced.
    * For each feature, if the flag is not explicitly set to `true`,

package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -11,6 +11,15 @@ const isItemExpandable = reactChildren => {
   }
   return Boolean(reactChildren);
 };
+
+/**
+ * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
+ */
+
+/**
+ * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
+ */
+
 const useTreeItem2Utils = ({
   itemId,
   children

package/node/index.js

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

package/node/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -9,6 +9,7 @@ exports.TreeViewChildrenItemProvider = TreeViewChildrenItemProvider;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTreeViewContext = require("./useTreeViewContext");
+var _utils = require("../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -44,7 +45,8 @@ function TreeViewChildrenItemProvider(props) {
       return;
     }
     const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
-    const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${idAttr}"] `}[role="treeitem"]:not(*[id="${idAttr}"] [role="treeitem"] [role="treeitem"])`);
+    const escapedIdAttr = (0, _utils.escapeOperandAttributeSelector)(idAttr);
+    const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${escapedIdAttr}"] `}[role="treeitem"]:not(*[id="${escapedIdAttr}"] [role="treeitem"] [role="treeitem"])`);
     const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
     const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);
     if (hasChanged) {

package/node/internals/corePlugins/corePlugins.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TREE_VIEW_CORE_PLUGINS = void 0;
 var _useTreeViewInstanceEvents = require("./useTreeViewInstanceEvents");
+var _useTreeViewId = require("./useTreeViewId");
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the tree view components.
  */
-const TREE_VIEW_CORE_PLUGINS = exports.TREE_VIEW_CORE_PLUGINS = [_useTreeViewInstanceEvents.useTreeViewInstanceEvents];
+const TREE_VIEW_CORE_PLUGINS = exports.TREE_VIEW_CORE_PLUGINS = [_useTreeViewInstanceEvents.useTreeViewInstanceEvents, _useTreeViewId.useTreeViewId];

package/node/internals/index.js

@@ -45,12 +45,6 @@ Object.defineProperty(exports, "useTreeViewIcons", {
     return _useTreeViewIcons.useTreeViewIcons;
   }
 });
-Object.defineProperty(exports, "useTreeViewId", {
-  enumerable: true,
-  get: function () {
-    return _useTreeViewId.useTreeViewId;
-  }
-});
 Object.defineProperty(exports, "useTreeViewItems", {
   enumerable: true,
   get: function () {
@@ -82,7 +76,6 @@ var _useTreeViewExpansion = require("./plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("./plugins/useTreeViewSelection");
 var _useTreeViewFocus = require("./plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("./plugins/useTreeViewKeyboardNavigation");
-var _useTreeViewId = require("./plugins/useTreeViewId");
 var _useTreeViewIcons = require("./plugins/useTreeViewIcons");
 var _useTreeViewItems = require("./plugins/useTreeViewItems");
 var _useTreeViewJSXItems = require("./plugins/useTreeViewJSXItems");

package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -62,6 +62,12 @@ const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
+  const expansionTrigger = React.useMemo(() => {
+    if (params.expansionTrigger) {
+      return params.expansionTrigger;
+    }
+    return 'content';
+  }, [params.expansionTrigger]);
   return {
     publicAPI: {
       setItemExpansion
@@ -72,6 +78,11 @@ const useTreeViewExpansion = ({
       setItemExpansion,
       toggleItemExpansion,
       expandAllSiblings
+    },
+    contextValue: {
+      expansion: {
+        expansionTrigger
+      }
     }
   };
 };
@@ -89,5 +100,6 @@ useTreeViewExpansion.params = {
   expandedItems: true,
   defaultExpandedItems: true,
   onExpandedItemsChange: true,
-  onItemExpansionToggle: true
+  onItemExpansionToggle: true,
+  expansionTrigger: true
 };

package/node/internals/utils/utils.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.escapeOperandAttributeSelector = escapeOperandAttributeSelector;
 exports.getActiveElement = void 0;
 // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
 const getActiveElement = (root = document) => {
@@ -15,4 +16,10 @@ const getActiveElement = (root = document) => {
   }
   return activeEl;
 };
-exports.getActiveElement = getActiveElement;
+
+// TODO, eventually replaces this function with CSS.escape, once available in jsdom, either added manually or built in
+// https://github.com/jsdom/jsdom/issues/1550#issuecomment-236734471
+exports.getActiveElement = getActiveElement;
+function escapeOperandAttributeSelector(operand) {
+  return operand.replace(/["\\]/g, '\\$&');
+}

package/node/useTreeItem2/useTreeItem2.js

@@ -22,6 +22,9 @@ const useTreeItem2 = parameters => {
       disableSelection,
       checkboxSelection
     },
+    expansion: {
+      expansionTrigger
+    },
     disabledItemsFocusable,
     indentationAtItemLevel,
     instance,
@@ -78,7 +81,9 @@ const useTreeItem2 = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    interactions.handleExpansion(event);
+    if (expansionTrigger === 'content') {
+      interactions.handleExpansion(event);
+    }
     if (!checkboxSelection) {
       interactions.handleSelection(event);
     }
@@ -104,6 +109,15 @@ const useTreeItem2 = parameters => {
     }
     interactions.handleCheckboxSelection(event);
   };
+  const createIconContainerHandleClick = otherHandlers => event => {
+    otherHandlers.onClick?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (expansionTrigger === 'iconContainer') {
+      interactions.handleExpansion(event);
+    }
+  };
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _utils.extractEventHandlers)(parameters), (0, _utils.extractEventHandlers)(externalProps));
     let ariaSelected;
@@ -171,7 +185,9 @@ const useTreeItem2 = parameters => {
   };
   const getIconContainerProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
-    return (0, _extends2.default)({}, externalEventHandlers, externalProps);
+    return (0, _extends2.default)({}, externalEventHandlers, externalProps, {
+      onClick: createIconContainerHandleClick(externalEventHandlers)
+    });
   };
   const getGroupTransitionProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,8 +35,8 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",

package/useTreeItem2/useTreeItem2.d.ts

@@ -1,2 +1,2 @@
-import { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2MinimalPlugins } from './useTreeItem2.types';
-export declare const useTreeItem2: <TSignatures extends UseTreeItem2MinimalPlugins = UseTreeItem2MinimalPlugins>(parameters: UseTreeItem2Parameters) => UseTreeItem2ReturnValue<TSignatures>;
+import { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2MinimalPlugins, UseTreeItem2OptionalPlugins } from './useTreeItem2.types';
+export declare const useTreeItem2: <TSignatures extends UseTreeItem2MinimalPlugins = UseTreeItem2MinimalPlugins, TOptionalSignatures extends UseTreeItem2OptionalPlugins = readonly []>(parameters: UseTreeItem2Parameters) => UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;

package/useTreeItem2/useTreeItem2.js

@@ -13,6 +13,9 @@ export const useTreeItem2 = parameters => {
       disableSelection,
       checkboxSelection
     },
+    expansion: {
+      expansionTrigger
+    },
     disabledItemsFocusable,
     indentationAtItemLevel,
     instance,
@@ -69,7 +72,9 @@ export const useTreeItem2 = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    interactions.handleExpansion(event);
+    if (expansionTrigger === 'content') {
+      interactions.handleExpansion(event);
+    }
     if (!checkboxSelection) {
       interactions.handleSelection(event);
     }
@@ -95,6 +100,15 @@ export const useTreeItem2 = parameters => {
     }
     interactions.handleCheckboxSelection(event);
   };
+  const createIconContainerHandleClick = otherHandlers => event => {
+    otherHandlers.onClick?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (expansionTrigger === 'iconContainer') {
+      interactions.handleExpansion(event);
+    }
+  };
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
     let ariaSelected;
@@ -162,7 +176,9 @@ export const useTreeItem2 = parameters => {
   };
   const getIconContainerProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    return _extends({}, externalEventHandlers, externalProps);
+    return _extends({}, externalEventHandlers, externalProps, {
+      onClick: createIconContainerHandleClick(externalEventHandlers)
+    });
   };
   const getGroupTransitionProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);

package/useTreeItem2/useTreeItem2.types.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { TreeViewItemId } from '../models';
 import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
-import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/models';
+import { TreeViewPublicAPI } from '../internals/models';
 import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
-import { UseTreeViewIdSignature } from '../internals/plugins/useTreeViewId';
 import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus';
 import { UseTreeViewKeyboardNavigationSignature } from '../internals/plugins/useTreeViewKeyboardNavigation';
+import { UseTreeViewExpansionSignature } from '../internals/plugins/useTreeViewExpansion';
 export interface UseTreeItem2Parameters {
     /**
      * The id attribute of the item. If not provided, it will be generated.
@@ -61,6 +61,7 @@ export interface UseTreeItem2ContentSlotOwnProps {
 }
 export type UseTreeItem2ContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2ContentSlotOwnProps;
 export interface UseTreeItem2IconContainerSlotOwnProps {
+    onClick: MuiCancellableEventHandler<React.MouseEvent>;
 }
 export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2IconContainerSlotOwnProps;
 export interface UseTreeItem2LabelSlotOwnProps {
@@ -95,7 +96,7 @@ export interface UseTreeItem2Status {
     selected: boolean;
     disabled: boolean;
 }
-export interface UseTreeItem2ReturnValue<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
+export interface UseTreeItem2ReturnValue<TSignatures extends UseTreeItem2MinimalPlugins, TOptionalSignatures extends UseTreeItem2OptionalPlugins> {
     /**
      * Resolver for the root slot's props.
      * @param {ExternalProps} externalProps Additional props for the root slot
@@ -143,12 +144,19 @@ export interface UseTreeItem2ReturnValue<TSignatures extends readonly TreeViewAn
     /**
      * The object the allows Tree View manipulation.
      */
-    publicAPI: TreeViewPublicAPI<TSignatures>;
+    publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
 }
+/**
+ * Plugins that need to be present in the Tree View in order for `useTreeItem2` to work correctly.
+ */
 export type UseTreeItem2MinimalPlugins = readonly [
     UseTreeViewSelectionSignature,
+    UseTreeViewExpansionSignature,
     UseTreeViewItemsSignature,
-    UseTreeViewIdSignature,
     UseTreeViewFocusSignature,
     UseTreeViewKeyboardNavigationSignature
 ];
+/**
+ * Plugins that `useTreeItem2` can use if they are present, but are not required.
+ */
+export type UseTreeItem2OptionalPlugins = readonly [];