@mui/x-tree-view 7.7.0 → 7.8.0

package/internals/corePlugins/index.d.ts

@@ -1,2 +1,2 @@
 export { TREE_VIEW_CORE_PLUGINS } from './corePlugins';
-export type { TreeViewCorePluginSignatures } from './corePlugins';
+export type { TreeViewCorePluginSignatures, TreeViewCorePluginParameters } from './corePlugins';

package/internals/{plugins → corePlugins}/useTreeViewId/useTreeViewId.types.d.ts

@@ -19,12 +19,8 @@ export interface UseTreeViewIdParameters {
     id?: string;
 }
 export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
-export interface UseTreeViewIdState {
-    focusedItemId: string | null;
-}
 export type UseTreeViewIdSignature = TreeViewPluginSignature<{
     params: UseTreeViewIdParameters;
     defaultizedParams: UseTreeViewIdDefaultizedParameters;
     instance: UseTreeViewIdInstance;
-    state: UseTreeViewIdState;
 }>;

package/internals/hooks/useInstanceEventHandler.d.ts

@@ -7,9 +7,9 @@ interface RegistryContainer {
 }
 export declare function createUseInstanceEventHandler(registryContainer: RegistryContainer): <Instance extends UseTreeViewInstanceEventsInstance & {
     $$signature: TreeViewAnyPluginSignature;
-}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance['$$signature']>[E]>) => void;
+}, E extends keyof TreeViewUsedEvents<Instance["$$signature"]>>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance["$$signature"]>[E]>) => void;
 export declare const unstable_resetCleanupTracking: () => void;
 export declare const useInstanceEventHandler: <Instance extends UseTreeViewInstanceEventsInstance & {
     $$signature: TreeViewAnyPluginSignature;
-}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance['$$signature']>[E]>) => void;
+}, E extends keyof TreeViewUsedEvents<Instance["$$signature"]>>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance["$$signature"]>[E]>) => void;
 export {};

package/internals/index.d.ts

@@ -2,6 +2,7 @@ export { useTreeView } from './useTreeView';
 export { TreeViewProvider } from './TreeViewProvider';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
 export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, } from './models';
+export type { TreeViewCorePluginParameters } from './corePlugins';
 export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
 export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters, } from './plugins/useTreeViewExpansion';
 export { useTreeViewSelection } from './plugins/useTreeViewSelection';
@@ -10,8 +11,6 @@ export { useTreeViewFocus } from './plugins/useTreeViewFocus';
 export type { UseTreeViewFocusSignature, UseTreeViewFocusParameters, } from './plugins/useTreeViewFocus';
 export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavigation';
 export type { UseTreeViewKeyboardNavigationSignature } from './plugins/useTreeViewKeyboardNavigation';
-export { useTreeViewId } from './plugins/useTreeViewId';
-export type { UseTreeViewIdSignature, UseTreeViewIdParameters } from './plugins/useTreeViewId';
 export { useTreeViewIcons } from './plugins/useTreeViewIcons';
 export type { UseTreeViewIconsSignature, UseTreeViewIconsParameters, } from './plugins/useTreeViewIcons';
 export { useTreeViewItems } from './plugins/useTreeViewItems';

package/internals/index.js

@@ -1,12 +1,14 @@
 export { useTreeView } from './useTreeView';
 export { TreeViewProvider } from './TreeViewProvider';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
+
+// Core plugins
+
 // Plugins
 export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
 export { useTreeViewSelection } from './plugins/useTreeViewSelection';
 export { useTreeViewFocus } from './plugins/useTreeViewFocus';
 export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavigation';
-export { useTreeViewId } from './plugins/useTreeViewId';
 export { useTreeViewIcons } from './plugins/useTreeViewIcons';
 export { useTreeViewItems } from './plugins/useTreeViewItems';
 export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';

package/internals/models/plugin.d.ts

@@ -42,7 +42,8 @@ export type TreeViewPluginSignature<T extends {
     };
     modelNames?: keyof T['defaultizedParams'];
     experimentalFeatures?: string;
-    dependantPlugins?: readonly TreeViewAnyPluginSignature[];
+    dependencies?: readonly TreeViewAnyPluginSignature[];
+    optionalDependencies?: readonly TreeViewAnyPluginSignature[];
 }> = {
     params: T extends {
         params: {};
@@ -77,17 +78,25 @@ export type TreeViewPluginSignature<T extends {
     } ? {
         [TControlled in T['modelNames']]-?: TreeViewModel<Exclude<T['defaultizedParams'][TControlled], undefined>>;
     } : {};
-    experimentalFeatures: T['experimentalFeatures'];
-    dependantPlugins: T extends {
-        dependantPlugins: Array<any>;
-    } ? T['dependantPlugins'] : [];
+    experimentalFeatures: T extends {
+        experimentalFeatures: string;
+    } ? {
+        [key in T['experimentalFeatures']]?: boolean;
+    } : {};
+    dependencies: T extends {
+        dependencies: Array<any>;
+    } ? T['dependencies'] : [];
+    optionalDependencies: T extends {
+        optionalDependencies: Array<any>;
+    } ? T['optionalDependencies'] : [];
 };
 export type TreeViewAnyPluginSignature = {
     state: any;
     instance: any;
     params: any;
     defaultizedParams: any;
-    dependantPlugins: any;
+    dependencies: any;
+    optionalDependencies: any;
     events: any;
     contextValue: any;
     slots: any;
@@ -96,25 +105,26 @@ export type TreeViewAnyPluginSignature = {
     experimentalFeatures: any;
     publicAPI: any;
 };
-type TreeViewUsedPlugins<TSignature extends TreeViewAnyPluginSignature> = [
+type TreeViewRequiredPlugins<TSignature extends TreeViewAnyPluginSignature> = [
     ...TreeViewCorePluginSignatures,
-    ...TSignature['dependantPlugins']
+    ...TSignature['dependencies']
 ];
-export type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['params'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'params'>;
-type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['defaultizedParams'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'defaultizedParams'>;
-export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature> = TSignature['instance'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'instance'> & {
+type PluginPropertyWithDependencies<TSignature extends TreeViewAnyPluginSignature, TProperty extends keyof TreeViewAnyPluginSignature> = TSignature[TProperty] & MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, TProperty> & Partial<MergeSignaturesProperty<TSignature['optionalDependencies'], TProperty>>;
+export type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'params'>;
+type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'defaultizedParams'>;
+export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'instance'> & {
     /**
      * Private property only defined in TypeScript to be able to access the plugin signature from the instance object.
      */
     $$signature: TSignature;
 };
-type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = TSignature['state'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'state'>;
-type TreeViewUsedExperimentalFeatures<TSignature extends TreeViewAnyPluginSignature> = TreeViewExperimentalFeatures<[TSignature, ...TSignature['dependantPlugins']]>;
+type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'state'>;
+type TreeViewUsedExperimentalFeatures<TSignature extends TreeViewAnyPluginSignature> = TreeViewExperimentalFeatures<[TSignature, ...TSignature['dependencies']]>;
 type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = {
     [K in keyof Models]: Omit<Models[K], 'setValue'>;
 };
-export type TreeViewUsedModels<TSignature extends TreeViewAnyPluginSignature> = TSignature['models'] & RemoveSetValue<MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'models'>>;
-export type TreeViewUsedEvents<TSignature extends TreeViewAnyPluginSignature> = TSignature['events'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'events'>;
+export type TreeViewUsedModels<TSignature extends TreeViewAnyPluginSignature> = TSignature['models'] & RemoveSetValue<MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, 'models'>>;
+export type TreeViewUsedEvents<TSignature extends TreeViewAnyPluginSignature> = TSignature['events'] & MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, 'events'>;
 export interface TreeViewItemPluginOptions<TProps extends {}> extends TreeViewItemPluginResponse {
     props: TProps;
 }
@@ -150,12 +160,12 @@ export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
      * @param {{ nodeId: TreeViewItemId; children: React.ReactNode; }} params The params of the item.
      * @returns {React.ReactNode} The wrapped item.
      */
-    wrapItem?: TreeItemWrapper<[TSignature, ...TSignature['dependantPlugins']]>;
+    wrapItem?: TreeItemWrapper<[TSignature, ...TSignature['dependencies']]>;
     /**
      * Render function used to add React wrappers around the TreeView.
      * @param {{ children: React.ReactNode; }} params The params of the root.
      * @returns {React.ReactNode} The wrapped root.
      */
-    wrapRoot?: TreeRootWrapper<[TSignature, ...TSignature['dependantPlugins']]>;
+    wrapRoot?: TreeRootWrapper<[TSignature, ...TSignature['dependencies']]>;
 };
 export {};

package/internals/models/treeView.d.ts

@@ -21,8 +21,6 @@ export interface TreeViewModel<TValue> {
     value: TValue;
     setControlledValue: (value: TValue | ((prevValue: TValue) => TValue)) => void;
 }
-export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'instance'>;
-export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'publicAPI'>;
-export type TreeViewExperimentalFeatures<TSignatures extends readonly TreeViewAnyPluginSignature[]> = {
-    [key in MergeSignaturesProperty<TSignatures, 'experimentalFeatures'>]?: boolean;
-};
+export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'instance'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
+export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'publicAPI'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
+export type TreeViewExperimentalFeatures<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TSignatures, ...TOptionalSignatures], 'experimentalFeatures'>;

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

@@ -65,13 +65,23 @@ export interface UseTreeViewExpansionParameters {
      * @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';
-    dependantPlugins: [UseTreeViewItemsSignature];
+    contextValue: UseTreeViewExpansionContextValue;
+    dependencies: [UseTreeViewItemsSignature];
 }>;
+export {};

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { TreeViewPluginSignature } from '../../models';
-import { UseTreeViewIdSignature } from '../useTreeViewId/useTreeViewId.types';
 import type { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
@@ -55,8 +54,7 @@ export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
     instance: UseTreeViewFocusInstance;
     publicAPI: UseTreeViewFocusPublicAPI;
     state: UseTreeViewFocusState;
-    dependantPlugins: [
-        UseTreeViewIdSignature,
+    dependencies: [
         UseTreeViewItemsSignature,
         UseTreeViewSelectionSignature,
         UseTreeViewExpansionSignature

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

@@ -38,6 +38,6 @@ export type UseTreeViewIconsSignature = TreeViewPluginSignature<{
     contextValue: UseTreeViewIconsContextValue;
     slots: UseTreeViewIconsSlots;
     slotProps: UseTreeViewIconsSlotProps;
-    dependantPlugins: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
+    dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
 }>;
 export {};

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

@@ -33,5 +33,5 @@ export type UseTreeViewJSXItemsSignature = TreeViewPluginSignature<{
     params: UseTreeViewJSXItemsParameters;
     defaultizedParams: UseTreeViewItemsDefaultizedParameters;
     instance: UseTreeViewItemsInstance;
-    dependantPlugins: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];
+    dependencies: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];
 }>;

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

@@ -24,7 +24,7 @@ export interface UseTreeViewKeyboardNavigationInstance {
 }
 export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
     instance: UseTreeViewKeyboardNavigationInstance;
-    dependantPlugins: [
+    dependencies: [
         UseTreeViewItemsSignature,
         UseTreeViewSelectionSignature,
         UseTreeViewFocusSignature,

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

@@ -101,7 +101,7 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
     instance: UseTreeViewSelectionInstance;
     contextValue: UseTreeViewSelectionContextValue;
     modelNames: 'selectedItems';
-    dependantPlugins: [
+    dependencies: [
         UseTreeViewItemsSignature,
         UseTreeViewExpansionSignature,
         UseTreeViewItemsSignature

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, ...Instance["$$signature"]["dependantPlugins"]], "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/utils.d.ts

@@ -1 +1,2 @@
 export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;
+export declare function escapeOperandAttributeSelector(operand: string): string;

package/internals/utils/utils.js

@@ -8,4 +8,10 @@ export const getActiveElement = (root = document) => {
     return getActiveElement(activeEl.shadowRoot);
   }
   return activeEl;
-};
+};
+
+// 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
+export function escapeOperandAttributeSelector(operand) {
+  return operand.replace(/["\\]/g, '\\$&');
+}

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

@@ -177,6 +177,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`,

package/modern/RichTreeView/RichTreeView.plugins.js

@@ -1,10 +1,9 @@
-import { useTreeViewId } from '../internals/plugins/useTreeViewId';
 import { useTreeViewItems } from '../internals/plugins/useTreeViewItems';
 import { useTreeViewExpansion } from '../internals/plugins/useTreeViewExpansion';
 import { useTreeViewSelection } from '../internals/plugins/useTreeViewSelection';
 import { useTreeViewFocus } from '../internals/plugins/useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from '../internals/plugins/useTreeViewKeyboardNavigation';
 import { useTreeViewIcons } from '../internals/plugins/useTreeViewIcons';
-export const RICH_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
+export const RICH_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -139,6 +139,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`,

package/modern/SimpleTreeView/SimpleTreeView.plugins.js

@@ -1,4 +1,3 @@
-import { useTreeViewId } from '../internals/plugins/useTreeViewId';
 import { useTreeViewItems } from '../internals/plugins/useTreeViewItems';
 import { useTreeViewExpansion } from '../internals/plugins/useTreeViewExpansion';
 import { useTreeViewSelection } from '../internals/plugins/useTreeViewSelection';
@@ -6,6 +5,6 @@ import { useTreeViewFocus } from '../internals/plugins/useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from '../internals/plugins/useTreeViewKeyboardNavigation';
 import { useTreeViewIcons } from '../internals/plugins/useTreeViewIcons';
 import { useTreeViewJSXItems } from '../internals/plugins/useTreeViewJSXItems';
-export const SIMPLE_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewJSXItems];
+export const SIMPLE_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewJSXItems];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

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);
@@ -70,6 +73,7 @@ export function useTreeItemState(itemId) {
     handleExpansion,
     handleSelection,
     handleCheckboxSelection,
-    preventSelection
+    preventSelection,
+    expansionTrigger
   };
 }

package/modern/TreeView/TreeView.js

@@ -116,6 +116,11 @@ process.env.NODE_ENV !== "production" ? TreeView.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`,

package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -5,6 +5,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.
+ */
+
 export const useTreeItem2Utils = ({
   itemId,
   children

package/modern/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/modern/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from './useTreeViewContext';
+import { escapeOperandAttributeSelector } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
@@ -34,7 +35,8 @@ export 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 = 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/modern/internals/corePlugins/corePlugins.js

@@ -1,6 +1,7 @@
 import { useTreeViewInstanceEvents } from './useTreeViewInstanceEvents';
+import { useTreeViewId } from './useTreeViewId';
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the tree view components.
  */
-export const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents];
+export const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents, useTreeViewId];

package/modern/internals/index.js

@@ -1,12 +1,14 @@
 export { useTreeView } from './useTreeView';
 export { TreeViewProvider } from './TreeViewProvider';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
+
+// Core plugins
+
 // Plugins
 export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
 export { useTreeViewSelection } from './plugins/useTreeViewSelection';
 export { useTreeViewFocus } from './plugins/useTreeViewFocus';
 export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavigation';
-export { useTreeViewId } from './plugins/useTreeViewId';
 export { useTreeViewIcons } from './plugins/useTreeViewIcons';
 export { useTreeViewItems } from './plugins/useTreeViewItems';
 export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';

package/modern/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/modern/internals/utils/utils.js

@@ -8,4 +8,10 @@ export const getActiveElement = (root = document) => {
     return getActiveElement(activeEl.shadowRoot);
   }
   return activeEl;
-};
+};
+
+// 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
+export function escapeOperandAttributeSelector(operand) {
+  return operand.replace(/["\\]/g, '\\$&');
+}