@mui/x-tree-view 7.7.1 → 7.9.0

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -53,6 +53,12 @@ export const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
+  const expansionTrigger = React.useMemo(() => {
+    if (params.expansionTrigger) {
+      return params.expansionTrigger;
+    }
+    return 'content';
+  }, [params.expansionTrigger]);
   return {
     publicAPI: {
       setItemExpansion
@@ -63,6 +69,11 @@ export const useTreeViewExpansion = ({
       setItemExpansion,
       toggleItemExpansion,
       expandAllSiblings
+    },
+    contextValue: {
+      expansion: {
+        expansionTrigger
+      }
     }
   };
 };
@@ -79,5 +90,6 @@ useTreeViewExpansion.params = {
   expandedItems: true,
   defaultExpandedItems: true,
   onExpandedItemsChange: true,
-  onItemExpansionToggle: true
+  onItemExpansionToggle: true,
+  expansionTrigger: true
 };

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts

@@ -5,9 +5,9 @@ import { TreeViewItemId } from '../../../models';
 export interface UseTreeViewExpansionPublicAPI {
     /**
      * Change the expansion status of a given item.
-     * @param {React.SyntheticEvent} event The UI event that triggered the change.
-     * @param {string} itemId The id of the item to modify.
-     * @param {boolean} isExpanded The new expansion status of the given item.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+     * @param {string} itemId The id of the item to expand of collapse.
+     * @param {boolean} isExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
      */
     setItemExpansion: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
 }
@@ -29,13 +29,13 @@ export interface UseTreeViewExpansionInstance extends UseTreeViewExpansionPublic
     /**
      * Toggle the current expansion of an item.
      * If it is expanded, it will be collapsed, and vice versa.
-     * @param {React.SyntheticEvent} event The UI event that triggered the change.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @param {TreeViewItemId} itemId The id of the item to toggle.
      */
     toggleItemExpansion: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
     /**
      * Expand all the siblings (i.e.: the items that have the same parent) of a given item.
-     * @param {React.SyntheticEvent} event The UI event that triggered the change.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @param {TreeViewItemId} itemId The id of the item whose siblings will be expanded.
      */
     expandAllSiblings: (event: React.KeyboardEvent, itemId: TreeViewItemId) => void;
@@ -54,24 +54,34 @@ export interface UseTreeViewExpansionParameters {
     defaultExpandedItems?: string[];
     /**
      * Callback fired when tree items are expanded/collapsed.
-     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @param {array} itemIds The ids of the expanded items.
      */
     onExpandedItemsChange?: (event: React.SyntheticEvent, itemIds: string[]) => void;
     /**
      * Callback fired when a tree item is expanded or collapsed.
-     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @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.
      */
     onItemExpansionToggle?: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
+    /**
+     * The slot that triggers the item's expansion when clicked.
+     * @default 'content'
+     */
+    expansionTrigger?: 'content' | 'iconContainer';
 }
 export type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<UseTreeViewExpansionParameters, 'defaultExpandedItems'>;
+interface UseTreeViewExpansionContextValue {
+    expansion: Pick<UseTreeViewExpansionParameters, 'expansionTrigger'>;
+}
 export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     params: UseTreeViewExpansionParameters;
     defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
     instance: UseTreeViewExpansionInstance;
     publicAPI: UseTreeViewExpansionPublicAPI;
     modelNames: 'expandedItems';
+    contextValue: UseTreeViewExpansionContextValue;
     dependencies: [UseTreeViewItemsSignature];
 }>;
+export {};

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -43,8 +43,7 @@ export const useTreeViewFocus = ({
     return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
   };
   const innerFocusItem = (event, itemId) => {
-    const itemMeta = instance.getItemMeta(itemId);
-    const itemElement = document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
+    const itemElement = instance.getItemDOMElement(itemId);
     if (itemElement) {
       itemElement.focus();
     }

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts

@@ -10,7 +10,7 @@ export interface UseTreeViewFocusPublicAPI {
      *
      * If the item is the child of a collapsed item, then this method will do nothing.
      * Make sure to expand the ancestors of the item before calling this method if needed.
-     * @param {React.SyntheticEvent} event The event source of the action.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @param {TreeViewItemId} itemId The id of the item to focus.
      */
     focusItem: (event: React.SyntheticEvent, itemId: string) => void;
@@ -38,7 +38,7 @@ export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
 export interface UseTreeViewFocusParameters {
     /**
      * 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 {React.SyntheticEvent} 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.
      */

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -92,6 +92,13 @@ export const useTreeViewItems = ({
     return state.items.itemChildrenIndexes[parentId][itemId];
   }, [instance, state.items.itemChildrenIndexes]);
   const getItemOrderedChildrenIds = React.useCallback(itemId => state.items.itemOrderedChildrenIds[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? [], [state.items.itemOrderedChildrenIds]);
+  const getItemDOMElement = itemId => {
+    const itemMeta = instance.getItemMeta(itemId);
+    if (itemMeta == null) {
+      return null;
+    }
+    return document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
+  };
   const isItemNavigable = itemId => {
     if (params.disabledItemsFocusable) {
       return true;
@@ -145,13 +152,15 @@ export const useTreeViewItems = ({
       }
     }),
     publicAPI: {
-      getItem
+      getItem,
+      getItemDOMElement
     },
     instance: {
       getItemMeta,
       getItem,
       getItemsToRender,
       getItemIndex,
+      getItemDOMElement,
       getItemOrderedChildrenIds,
       isItemDisabled,
       isItemNavigable,

package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -10,10 +10,16 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
     /**
      * Get the item with the given id.
      * When used in the `SimpleTreeView`, it returns an object with the `id` and `label` properties.
-     * @param {string} itemId The id of the item to return.
+     * @param {string} itemId The id of the item to retrieve.
      * @returns {R} The item with the given id.
      */
     getItem: (itemId: TreeViewItemId) => R;
+    /**
+     * Get the DOM element of the item with the given id.
+     * @param {TreeViewItemId} itemId The id of the item to get the DOM element of.
+     * @returns {HTMLElement | null} The DOM element of the item with the given id.
+     */
+    getItemDOMElement: (itemId: TreeViewItemId) => HTMLElement | null;
 }
 export interface UseTreeViewItemsInstance<R extends {}> extends UseTreeViewItemsPublicAPI<R> {
     /**

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -74,10 +74,13 @@ export const useTreeViewKeyboardNavigation = ({
           event.preventDefault();
           if (params.multiSelect && event.shiftKey) {
             instance.expandSelectionRange(event, itemId);
-          } else if (params.multiSelect) {
-            instance.selectItem(event, itemId, true);
           } else {
-            instance.selectItem(event, itemId, false);
+            instance.selectItem({
+              event,
+              itemId,
+              keepExistingSelection: params.multiSelect,
+              shouldBeSelected: params.multiSelect ? undefined : true
+            });
           }
           break;
         }
@@ -92,9 +95,16 @@ export const useTreeViewKeyboardNavigation = ({
           } else if (canToggleItemSelection(itemId)) {
             if (params.multiSelect) {
               event.preventDefault();
-              instance.selectItem(event, itemId, true);
+              instance.selectItem({
+                event,
+                itemId,
+                keepExistingSelection: true
+              });
             } else if (!instance.isItemSelected(itemId)) {
-              instance.selectItem(event, itemId, false);
+              instance.selectItem({
+                event,
+                itemId
+              });
               event.preventDefault();
             }
           }

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -46,7 +46,12 @@ export const useTreeViewSelection = ({
     models.selectedItems.setControlledValue(newSelectedItems);
   };
   const isItemSelected = itemId => selectedItemsMap.has(itemId);
-  const selectItem = (event, itemId, keepExistingSelection, newValue) => {
+  const selectItem = ({
+    event,
+    itemId,
+    keepExistingSelection = false,
+    shouldBeSelected
+  }) => {
     if (params.disableSelection) {
       return;
     }
@@ -54,16 +59,16 @@ export const useTreeViewSelection = ({
     if (keepExistingSelection) {
       const cleanSelectedItems = convertSelectedItemsToArray(models.selectedItems.value);
       const isSelectedBefore = instance.isItemSelected(itemId);
-      if (isSelectedBefore && (newValue === false || newValue == null)) {
+      if (isSelectedBefore && (shouldBeSelected === false || shouldBeSelected == null)) {
         newSelected = cleanSelectedItems.filter(id => id !== itemId);
-      } else if (!isSelectedBefore && (newValue === true || newValue == null)) {
+      } else if (!isSelectedBefore && (shouldBeSelected === true || shouldBeSelected == null)) {
         newSelected = [itemId].concat(cleanSelectedItems);
       } else {
         newSelected = cleanSelectedItems;
       }
     } else {
       // eslint-disable-next-line no-lonely-if
-      if (newValue === false) {
+      if (shouldBeSelected === false || shouldBeSelected == null && instance.isItemSelected(itemId)) {
         newSelected = params.multiSelect ? [] : null;
       } else {
         newSelected = params.multiSelect ? [itemId] : itemId;
@@ -142,6 +147,9 @@ export const useTreeViewSelection = ({
     getRootProps: () => ({
       'aria-multiselectable': params.multiSelect
     }),
+    publicAPI: {
+      selectItem
+    },
     instance: {
       isItemSelected,
       selectItem,

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts

@@ -2,47 +2,55 @@ import * as React from 'react';
 import type { DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
-export interface UseTreeViewSelectionInstance {
+export interface UseTreeViewSelectionPublicAPI {
+    /**
+     * Select or deselect an item.
+     * @param {object} params The params of the method.
+     * @param {React.SyntheticEvent} params.event The DOM event that triggered the change.
+     * @param {string} params.itemId The id of the item to select or deselect.
+     * @param {boolean} params.keepExistingSelection If `true`, the other already selected items will remain selected, otherwise, they will be deselected. This parameter is only relevant when `multiSelect` is `true`
+     * @param {boolean | undefined} params.shouldBeSelected If `true` the item will be selected. If `false` the item will be deselected. If not defined, the item's new selection status will be the opposite of its current one.
+     */
+    selectItem: (params: {
+        event: React.SyntheticEvent;
+        itemId: string;
+        keepExistingSelection?: boolean;
+        shouldBeSelected?: boolean;
+    }) => void;
+}
+export interface UseTreeViewSelectionInstance extends UseTreeViewSelectionPublicAPI {
     /**
      * Check if an item is selected.
      * @param {TreeViewItemId} itemId The id of the item to check.
      * @returns {boolean} `true` if the item is selected, `false` otherwise.
      */
     isItemSelected: (itemId: string) => boolean;
-    /**
-     * Select or deselect an item.
-     * @param {React.SyntheticEvent} event The event source of the callback.
-     * @param {string} itemId The id of the item to select or deselect.
-     * @param {boolean} keepExistingSelection If `true`, don't remove the other selected items.
-     * @param {boolean | undefined} newValue The new selection status of the item. If not defined, the new state will be the opposite of the current state.
-     */
-    selectItem: (event: React.SyntheticEvent, itemId: string, keepExistingSelection: boolean, newValue?: boolean) => void;
     /**
      * Select all the navigable items in the tree.
-     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      */
     selectAllNavigableItems: (event: React.SyntheticEvent) => void;
     /**
      * Expand the current selection range up to the given item.
-     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @param {string} itemId The id of the item to expand the selection to.
      */
     expandSelectionRange: (event: React.SyntheticEvent, itemId: string) => void;
     /**
      * Expand the current selection range from the first navigable item to the given item.
-     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @param {string} itemId The id of the item up to which the selection range should be expanded.
      */
     selectRangeFromStartToItem: (event: React.SyntheticEvent, itemId: string) => void;
     /**
      * Expand the current selection range from the given item to the last navigable item.
-     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @param {string} itemId The id of the item from which the selection range should be expanded.
      */
     selectRangeFromItemToEnd: (event: React.SyntheticEvent, itemId: string) => void;
     /**
      * Update the selection when navigating with ArrowUp / ArrowDown keys.
-     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @param {string} currentItemId The id of the active item before the keyboard navigation.
      * @param {string} nextItemId The id of the active item after the keyboard navigation.
      */
@@ -78,14 +86,14 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
     checkboxSelection?: boolean;
     /**
      * Callback fired when tree items are selected/deselected.
-     * @param {React.SyntheticEvent} event The event source of the callback
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @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.
      */
     onSelectedItemsChange?: (event: React.SyntheticEvent, itemIds: TreeViewSelectionValue<Multiple>) => void;
     /**
      * Callback fired when a tree item is selected or deselected.
-     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @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.
      */
@@ -99,6 +107,7 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
     params: UseTreeViewSelectionParameters<any>;
     defaultizedParams: UseTreeViewSelectionDefaultizedParameters<any>;
     instance: UseTreeViewSelectionInstance;
+    publicAPI: UseTreeViewSelectionPublicAPI;
     contextValue: UseTreeViewSelectionContextValue;
     modelNames: 'selectedItems';
     dependencies: [

package/internals/useTreeView/useTreeViewModels.d.ts

@@ -4,4 +4,4 @@ import { TreeViewCorePluginSignatures } from '../corePlugins';
  * Implements the same behavior as `useControlled` but for several models.
  * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
  */
-export declare const useTreeViewModels: <TSignatures extends readonly TreeViewAnyPluginSignature[]>(plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>, props: MergeSignaturesProperty<TSignatures, 'defaultizedParams'>) => MergeSignaturesProperty<TSignatures, "models">;
+export declare const useTreeViewModels: <TSignatures extends readonly TreeViewAnyPluginSignature[]>(plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>, props: MergeSignaturesProperty<TSignatures, "defaultizedParams">) => MergeSignaturesProperty<TSignatures, "models">;

package/internals/utils/cleanupTracking/TimerBasedCleanupTracking.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { CleanupTracking, UnregisterToken, UnsubscribeFn } from './CleanupTracking';
 export declare class TimerBasedCleanupTracking implements CleanupTracking {
     timeouts?: Map<number, NodeJS.Timeout> | undefined;

package/internals/utils/publishTreeViewEvent.d.ts

@@ -2,4 +2,4 @@ import { UseTreeViewInstanceEventsInstance } from '../corePlugins/useTreeViewIns
 import { TreeViewAnyPluginSignature, TreeViewUsedEvents } from '../models';
 export declare const publishTreeViewEvent: <Instance extends UseTreeViewInstanceEventsInstance & {
     $$signature: TreeViewAnyPluginSignature;
-}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, import("../corePlugins/useTreeViewId").UseTreeViewIdSignature, ...Instance["$$signature"]["dependencies"]], "events">>(instance: Instance, eventName: E, params: TreeViewUsedEvents<Instance['$$signature']>[E]['params']) => void;
+}, E extends keyof TreeViewUsedEvents<Instance["$$signature"]>>(instance: Instance, eventName: E, params: TreeViewUsedEvents<Instance["$$signature"]>[E]["params"]) => void;

package/internals/utils/warning.d.ts

@@ -1 +1 @@
-export declare const buildWarning: (message: string | string[], gravity?: 'warning' | 'error') => () => void;
+export declare const buildWarning: (message: string | string[], gravity?: "warning" | "error") => () => void;

package/modern/RichTreeView/RichTreeView.js

@@ -137,6 +137,8 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
     current: PropTypes.shape({
       focusItem: PropTypes.func.isRequired,
       getItem: PropTypes.func.isRequired,
+      getItemDOMElement: PropTypes.func.isRequired,
+      selectItem: PropTypes.func.isRequired,
       setItemExpansion: PropTypes.func.isRequired
     })
   }),
@@ -177,6 +179,11 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger: PropTypes.oneOf(['content', 'iconContainer']),
   /**
    * Unstable features, breaking changes might be introduced.
    * For each feature, if the flag is not explicitly set to `true`,
@@ -229,34 +236,34 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   multiSelect: PropTypes.bool,
   /**
    * Callback fired when tree items are expanded/collapsed.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: PropTypes.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @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.
    */
   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 {React.SyntheticEvent} 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,
   /**
    * Callback fired when a tree item is selected or deselected.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @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.
    */
   onItemSelectionToggle: PropTypes.func,
   /**
    * Callback fired when tree items are selected/deselected.
-   * @param {React.SyntheticEvent} event The event source of the callback
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @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.
    */

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -95,6 +95,8 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
     current: PropTypes.shape({
       focusItem: PropTypes.func.isRequired,
       getItem: PropTypes.func.isRequired,
+      getItemDOMElement: PropTypes.func.isRequired,
+      selectItem: PropTypes.func.isRequired,
       setItemExpansion: PropTypes.func.isRequired
     })
   }),
@@ -139,6 +141,11 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger: PropTypes.oneOf(['content', 'iconContainer']),
   /**
    * Unstable features, breaking changes might be introduced.
    * For each feature, if the flag is not explicitly set to `true`,
@@ -165,34 +172,34 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   multiSelect: PropTypes.bool,
   /**
    * Callback fired when tree items are expanded/collapsed.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: PropTypes.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @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.
    */
   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 {React.SyntheticEvent} 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,
   /**
    * Callback fired when a tree item is selected or deselected.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @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.
    */
   onItemSelectionToggle: PropTypes.func,
   /**
    * Callback fired when tree items are selected/deselected.
-   * @param {React.SyntheticEvent} event The event source of the callback
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @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.
    */

package/modern/TreeItem/TreeItem.js

@@ -22,6 +22,7 @@ import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewCon
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { TreeItem2Provider } from '../TreeItem2Provider';
 import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
+import { useTreeItemState } from './useTreeItemState';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem');
 const useUtilityClasses = ownerState => {
@@ -168,6 +169,9 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     selection: {
       multiSelect
     },
+    expansion: {
+      expansionTrigger
+    },
     disabledItemsFocusable,
     indentationAtItemLevel,
     instance
@@ -193,6 +197,13 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       onKeyDown
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    expanded,
+    focused,
+    selected,
+    disabled,
+    handleExpansion
+  } = useTreeItemState(itemId);
   const {
     contentRef,
     rootRef
@@ -213,10 +224,6 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     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 = _extends({}, props, {
     expanded,
     focused,
@@ -240,6 +247,11 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     } : {}),
     className: classes.groupTransition
   });
+  const handleIconContainerClick = event => {
+    if (expansionTrigger === 'iconContainer') {
+      handleExpansion(event);
+    }
+  };
   const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
   const _useSlotProps = useSlotProps({
       elementType: ExpansionIcon,
@@ -249,6 +261,9 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
           return _extends({}, resolveComponentProps(contextIcons.slotProps.collapseIcon, tempOwnerState), resolveComponentProps(inSlotProps?.collapseIcon, tempOwnerState));
         }
         return _extends({}, resolveComponentProps(contextIcons.slotProps.expandIcon, tempOwnerState), resolveComponentProps(inSlotProps?.expandIcon, tempOwnerState));
+      },
+      additionalProps: {
+        onClick: handleIconContainerClick
       }
     }),
     expansionIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);

package/modern/TreeItem/TreeItemContent.js

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

package/modern/TreeItem/useTreeItemState.js

@@ -6,6 +6,9 @@ export function useTreeItemState(itemId) {
       multiSelect,
       checkboxSelection,
       disableSelection
+    },
+    expansion: {
+      expansionTrigger
     }
   } = useTreeViewContext();
   const expandable = instance.isItemExpandable(itemId);
@@ -36,10 +39,18 @@ export function useTreeItemState(itemId) {
         if (event.shiftKey) {
           instance.expandSelectionRange(event, itemId);
         } else {
-          instance.selectItem(event, itemId, true);
+          instance.selectItem({
+            event,
+            itemId,
+            keepExistingSelection: true
+          });
         }
       } else {
-        instance.selectItem(event, itemId, false);
+        instance.selectItem({
+          event,
+          itemId,
+          shouldBeSelected: true
+        });
       }
     }
   };
@@ -51,7 +62,12 @@ export function useTreeItemState(itemId) {
     if (multiSelect && hasShift) {
       instance.expandSelectionRange(event, itemId);
     } else {
-      instance.selectItem(event, itemId, multiSelect, event.target.checked);
+      instance.selectItem({
+        event,
+        itemId,
+        keepExistingSelection: multiSelect,
+        shouldBeSelected: event.target.checked
+      });
     }
   };
   const preventSelection = event => {
@@ -70,6 +86,7 @@ export function useTreeItemState(itemId) {
     handleExpansion,
     handleSelection,
     handleCheckboxSelection,
-    preventSelection
+    preventSelection,
+    expansionTrigger
   };
 }