@mui/x-tree-view 7.22.0 → 8.0.0-alpha.0

package/index.js

@@ -1,21 +1,21 @@
 /**
- * @mui/x-tree-view v7.22.0
+ * @mui/x-tree-view v8.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 // Tree View
-export * from "./TreeView/index.js";
 export * from "./SimpleTreeView/index.js";
 export * from "./RichTreeView/index.js";
 
 // Tree Item
 export * from "./TreeItem/index.js";
-export * from "./TreeItem2/index.js";
-export * from "./useTreeItem2/index.js";
-export * from "./TreeItem2Icon/index.js";
-export * from "./TreeItem2Provider/index.js";
+export * from "./useTreeItem/index.js";
+export * from "./TreeItemIcon/index.js";
+export * from "./TreeItemProvider/index.js";
+export * from "./TreeItemDragAndDropOverlay/index.js";
+export * from "./TreeItemLabelInput/index.js";
 export { unstable_resetCleanupTracking } from "./internals/hooks/useInstanceEventHandler.js";
 export * from "./models/index.js";
 export * from "./icons/index.js";

package/internals/TreeViewProvider/TreeViewProvider.types.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { MergeSignaturesProperty, TreeItemWrapper, TreeRootWrapper, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginResponse, TreeViewPublicAPI } from '../models';
 import { TreeViewCorePluginSignatures } from '../corePlugins';
-export type TreeViewItemPluginsRunner = <TProps extends {}>(props: TProps) => Required<TreeViewItemPluginResponse>;
+import type { TreeItemProps } from '../../TreeItem';
+export type TreeViewItemPluginsRunner = (props: TreeItemProps) => Required<TreeViewItemPluginResponse>;
 export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'contextValue'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'contextValue'>> & {
     instance: TreeViewInstance<TSignatures, TOptionalSignatures>;
     publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;

package/internals/components/RichTreeViewItems.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import { TreeItem, TreeItemProps } from '../../TreeItem';
-import { TreeItem2Props } from '../../TreeItem2';
 import { TreeViewItemId } from '../../models';
 import { TreeViewItemToRenderProps } from '../plugins/useTreeViewItems';
 interface RichTreeViewItemsOwnerState {
@@ -13,7 +12,7 @@ export interface RichTreeViewItemsSlots {
      * Custom component for the item.
      * @default TreeItem.
      */
-    item?: React.JSXElementConstructor<TreeItemProps> | React.JSXElementConstructor<TreeItem2Props>;
+    item?: React.JSXElementConstructor<TreeItemProps>;
 }
 export interface RichTreeViewItemsSlotProps {
     item?: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemsOwnerState>;

package/internals/index.d.ts

@@ -2,7 +2,7 @@ export { useTreeView } from './useTreeView';
 export { TreeViewProvider, useTreeViewContext } from './TreeViewProvider';
 export { RichTreeViewItems } from './components/RichTreeViewItems';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
-export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, DefaultizedProps, TreeViewItemPlugin, } from './models';
+export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, } from './models';
 export type { TreeViewCorePluginParameters } from './corePlugins';
 export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
 export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters, } from './plugins/useTreeViewExpansion';

package/internals/models/helpers.d.ts

@@ -1,6 +1,4 @@
 import type { TreeViewAnyPluginSignature, TreeViewPlugin } from './plugin';
-export type DefaultizedProps<P extends {}, RequiredProps extends keyof P, AdditionalProps extends {} = {}> = Omit<P, RequiredProps | keyof AdditionalProps> & Required<Pick<P, RequiredProps>> & AdditionalProps;
-export type SlotComponentPropsFromProps<TProps extends {}, TOverrides extends {}, TOwnerState extends {}> = (Partial<TProps> & TOverrides) | ((ownerState: TOwnerState) => Partial<TProps> & TOverrides);
 type IsAny<T> = 0 extends 1 & T ? true : false;
 export type OptionalIfEmpty<A extends string, B> = keyof B extends never ? Partial<Record<A, B>> : IsAny<B> extends true ? Partial<Record<A, B>> : Record<A, B>;
 export type MergeSignaturesProperty<TSignatures extends readonly any[], TProperty extends keyof TreeViewAnyPluginSignature> = TSignatures extends readonly [plugin: infer P, ...otherPlugin: infer R] ? P extends TreeViewAnyPluginSignature ? P[TProperty] & MergeSignaturesProperty<R, TProperty> : {} : {};

package/internals/models/itemPlugin.d.ts

@@ -1,19 +1,22 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/utils';
-import type { UseTreeItem2ContentSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, UseTreeItem2LabelInputSlotOwnProps, UseTreeItem2RootSlotOwnProps } from '../../useTreeItem2';
-import type { UseTreeItem2Interactions } from '../../hooks/useTreeItem2Utils/useTreeItem2Utils';
+import type { TreeItemProps } from '../../TreeItem';
+import type { UseTreeItemContentSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemRootSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemStatus } from '../../useTreeItem';
+import type { UseTreeItemInteractions } from '../../hooks/useTreeItemUtils/useTreeItemUtils';
 export interface TreeViewItemPluginSlotPropsEnhancerParams {
     rootRefObject: React.MutableRefObject<HTMLLIElement | null>;
     contentRefObject: React.MutableRefObject<HTMLDivElement | null>;
     externalEventHandlers: EventHandlers;
-    interactions: Pick<UseTreeItem2Interactions, 'handleSaveItemLabel' | 'handleCancelItemLabelEditing'>;
+    interactions: UseTreeItemInteractions;
+    status: UseTreeItemStatus;
 }
 type TreeViewItemPluginSlotPropsEnhancer<TSlotProps> = (params: TreeViewItemPluginSlotPropsEnhancerParams) => Partial<TSlotProps>;
 export interface TreeViewItemPluginSlotPropsEnhancers {
-    root?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItem2RootSlotOwnProps>;
-    content?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItem2ContentSlotOwnProps>;
-    dragAndDropOverlay?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItem2DragAndDropOverlaySlotOwnProps>;
-    labelInput?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItem2LabelInputSlotOwnProps>;
+    root?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemRootSlotOwnProps>;
+    content?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemContentSlotOwnProps>;
+    dragAndDropOverlay?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemDragAndDropOverlaySlotOwnProps>;
+    labelInput?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemLabelInputSlotOwnProps>;
+    checkbox?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemCheckboxSlotOwnProps>;
 }
 export interface TreeViewItemPluginResponse {
     /**
@@ -36,5 +39,5 @@ export interface TreeViewItemPluginResponse {
 export interface TreeViewItemPluginOptions<TProps extends {}> extends Omit<TreeViewItemPluginResponse, 'propsEnhancers'> {
     props: TProps;
 }
-export type TreeViewItemPlugin<TProps extends {}> = (options: TreeViewItemPluginOptions<TProps>) => void | TreeViewItemPluginResponse;
+export type TreeViewItemPlugin = (options: TreeViewItemPluginOptions<TreeItemProps>) => void | TreeViewItemPluginResponse;
 export {};

package/internals/models/plugin.d.ts

@@ -145,7 +145,7 @@ export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
     getInitialState?: (params: TreeViewUsedDefaultizedParams<TSignature>) => TSignature['state'];
     models?: TreeViewModelsInitializer<TSignature>;
     params: Record<keyof TSignature['params'], true>;
-    itemPlugin?: TreeViewItemPlugin<any>;
+    itemPlugin?: TreeViewItemPlugin;
     /**
      * Render function used to add React wrappers around the TreeItem.
      * @param {{ nodeId: TreeViewItemId; children: React.ReactNode; }} params The params of the item.

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { TreeViewItemId } from '../../../models';
 import { UseTreeViewLabelSignature } from '../useTreeViewLabel';

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -63,8 +63,7 @@ export const useTreeViewItems = ({
   instance,
   params,
   state,
-  setState,
-  experimentalFeatures
+  setState
 }) => {
   const getItemMeta = React.useCallback(itemId => state.items.itemMetaMap[itemId], [state.items.itemMetaMap]);
   const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
@@ -191,8 +190,7 @@ export const useTreeViewItems = ({
     contextValue: {
       items: {
         onItemClick: params.onItemClick,
-        disabledItemsFocusable: params.disabledItemsFocusable,
-        indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
+        disabledItemsFocusable: params.disabledItemsFocusable
       }
     }
   };

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { TreeViewItemMeta, DefaultizedProps, TreeViewPluginSignature } from '../../models';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewItemMeta, TreeViewPluginSignature } from '../../models';
 import { TreeViewBaseItem, TreeViewItemId } from '../../../models';
 export interface TreeViewItemToRenderProps {
     label: string;
@@ -154,9 +155,7 @@ export interface UseTreeViewItemsState<R extends {}> {
     };
 }
 interface UseTreeViewItemsContextValue {
-    items: Pick<UseTreeViewItemsDefaultizedParameters<any>, 'disabledItemsFocusable' | 'onItemClick'> & {
-        indentationAtItemLevel: boolean;
-    };
+    items: Pick<UseTreeViewItemsDefaultizedParameters<any>, 'disabledItemsFocusable' | 'onItemClick'>;
 }
 export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
     params: UseTreeViewItemsParameters<any>;
@@ -166,7 +165,6 @@ export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
     events: UseTreeViewItemsEventLookup;
     state: UseTreeViewItemsState<any>;
     contextValue: UseTreeViewItemsContextValue;
-    experimentalFeatures: 'indentationAtItemLevel';
 }>;
 export type TreeViewItemMetaMap = {
     [itemId: string]: TreeViewItemMeta;

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts

@@ -1,2 +1,2 @@
 import { TreeViewItemPlugin } from '../../models';
-export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin<any>;
+export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin;

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

@@ -1,7 +1,8 @@
-import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewPluginSignature } from '../../models';
 import { TreeViewItemId } from '../../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
-import { TreeItem2LabelInputProps } from '../../../TreeItem2LabelInput';
+import { TreeItemLabelInputProps } from '../../../TreeItemLabelInput';
 export interface UseTreeViewLabelPublicAPI {
     /**
      * Used to update the label of an item.
@@ -72,9 +73,9 @@ export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
     experimentalFeatures: 'labelEditing';
     dependencies: [UseTreeViewItemsSignature];
 }>;
-export interface UseTreeItem2LabelInputSlotPropsFromLabelEditing extends TreeItem2LabelInputProps {
+export interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {
 }
-declare module '@mui/x-tree-view/useTreeItem2' {
-    interface UseTreeItem2LabelInputSlotOwnProps extends UseTreeItem2LabelInputSlotPropsFromLabelEditing {
+declare module '@mui/x-tree-view/useTreeItem' {
+    interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {
     }
 }

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

@@ -0,0 +1,2 @@
+import { TreeViewItemPlugin } from '../../models';
+export declare const useTreeViewSelectionItemPlugin: TreeViewItemPlugin;

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useTreeViewContext } from "../../TreeViewProvider/index.js";
+function getCheckboxStatus({
+  itemId,
+  instance,
+  selectionPropagation,
+  selected
+}) {
+  if (selected) {
+    return {
+      indeterminate: false,
+      checked: true
+    };
+  }
+  const children = instance.getItemOrderedChildrenIds(itemId);
+  if (children.length === 0) {
+    return {
+      indeterminate: false,
+      checked: false
+    };
+  }
+  let hasSelectedDescendant = false;
+  let hasUnSelectedDescendant = false;
+  const traverseDescendants = itemToTraverseId => {
+    if (itemToTraverseId !== itemId) {
+      if (instance.isItemSelected(itemToTraverseId)) {
+        hasSelectedDescendant = true;
+      } else {
+        hasUnSelectedDescendant = true;
+      }
+    }
+    instance.getItemOrderedChildrenIds(itemToTraverseId).forEach(traverseDescendants);
+  };
+  traverseDescendants(itemId);
+  return {
+    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant && !selected,
+    checked: selectionPropagation.parents ? hasSelectedDescendant : selected
+  };
+}
+export const useTreeViewSelectionItemPlugin = ({
+  props
+}) => {
+  const {
+    itemId
+  } = props;
+  const {
+    instance,
+    selection: {
+      disableSelection,
+      checkboxSelection,
+      selectionPropagation
+    }
+  } = useTreeViewContext();
+  return {
+    propsEnhancers: {
+      checkbox: ({
+        externalEventHandlers,
+        interactions,
+        status
+      }) => {
+        const handleChange = event => {
+          externalEventHandlers.onChange?.(event);
+          if (event.defaultMuiPrevented) {
+            return;
+          }
+          if (disableSelection || status.disabled) {
+            return;
+          }
+          interactions.handleCheckboxSelection(event);
+        };
+        const checkboxStatus = getCheckboxStatus({
+          instance,
+          itemId,
+          selectionPropagation,
+          selected: status.selected
+        });
+        return _extends({
+          visible: checkboxSelection,
+          disabled: disableSelection || status.disabled,
+          tabIndex: -1,
+          onChange: handleChange
+        }, checkboxStatus);
+      }
+    }
+  };
+};

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
-import { convertSelectedItemsToArray, getLookupFromArray } from "./useTreeViewSelection.utils.js";
+import { convertSelectedItemsToArray, propagateSelection, getAddedAndRemovedItems, getLookupFromArray } from "./useTreeViewSelection.utils.js";
+import { useTreeViewSelectionItemPlugin } from "./useTreeViewSelection.itemPlugin.js";
 export const useTreeViewSelection = ({
   instance,
   params,
@@ -20,30 +21,47 @@ export const useTreeViewSelection = ({
     }
     return temp;
   }, [models.selectedItems.value]);
-  const setSelectedItems = (event, newSelectedItems) => {
+  const setSelectedItems = (event, newModel, additionalItemsToPropagate) => {
+    let cleanModel;
+    if (params.multiSelect && (params.selectionPropagation.descendants || params.selectionPropagation.parents)) {
+      cleanModel = propagateSelection({
+        instance,
+        selectionPropagation: params.selectionPropagation,
+        newModel: newModel,
+        oldModel: models.selectedItems.value,
+        additionalItemsToPropagate
+      });
+    } else {
+      cleanModel = newModel;
+    }
     if (params.onItemSelectionToggle) {
       if (params.multiSelect) {
-        const addedItems = newSelectedItems.filter(itemId => !instance.isItemSelected(itemId));
-        const removedItems = models.selectedItems.value.filter(itemId => !newSelectedItems.includes(itemId));
-        addedItems.forEach(itemId => {
-          params.onItemSelectionToggle(event, itemId, true);
+        const changes = getAddedAndRemovedItems({
+          instance,
+          newModel: cleanModel,
+          oldModel: models.selectedItems.value
         });
-        removedItems.forEach(itemId => {
-          params.onItemSelectionToggle(event, itemId, false);
-        });
-      } else if (newSelectedItems !== models.selectedItems.value) {
+        if (params.onItemSelectionToggle) {
+          changes.added.forEach(itemId => {
+            params.onItemSelectionToggle(event, itemId, true);
+          });
+          changes.removed.forEach(itemId => {
+            params.onItemSelectionToggle(event, itemId, false);
+          });
+        }
+      } else if (params.onItemSelectionToggle && cleanModel !== models.selectedItems.value) {
         if (models.selectedItems.value != null) {
           params.onItemSelectionToggle(event, models.selectedItems.value, false);
         }
-        if (newSelectedItems != null) {
-          params.onItemSelectionToggle(event, newSelectedItems, true);
+        if (cleanModel != null) {
+          params.onItemSelectionToggle(event, cleanModel, true);
         }
       }
     }
     if (params.onSelectedItemsChange) {
-      params.onSelectedItemsChange(event, newSelectedItems);
+      params.onSelectedItemsChange(event, cleanModel);
     }
-    models.selectedItems.setControlledValue(newSelectedItems);
+    models.selectedItems.setControlledValue(cleanModel);
   };
   const isItemSelected = itemId => selectedItemsMap.has(itemId);
   const selectItem = ({
@@ -74,7 +92,10 @@ export const useTreeViewSelection = ({
         newSelected = params.multiSelect ? [itemId] : itemId;
       }
     }
-    setSelectedItems(event, newSelected);
+    setSelectedItems(event, newSelected,
+    // If shouldBeSelected === instance.isItemSelect(itemId), we still want to propagate the select.
+    // This is useful when the element is in an indeterminate state.
+    [itemId]);
     lastSelectedItem.current = itemId;
     lastSelectedRange.current = {};
   };
@@ -163,11 +184,13 @@ export const useTreeViewSelection = ({
       selection: {
         multiSelect: params.multiSelect,
         checkboxSelection: params.checkboxSelection,
-        disableSelection: params.disableSelection
+        disableSelection: params.disableSelection,
+        selectionPropagation: params.selectionPropagation
       }
     }
   };
 };
+useTreeViewSelection.itemPlugin = useTreeViewSelectionItemPlugin;
 useTreeViewSelection.models = {
   selectedItems: {
     getDefaultValue: params => params.defaultSelectedItems
@@ -180,7 +203,8 @@ useTreeViewSelection.getDefaultizedParams = ({
   disableSelection: params.disableSelection ?? false,
   multiSelect: params.multiSelect ?? false,
   checkboxSelection: params.checkboxSelection ?? false,
-  defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null)
+  defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null),
+  selectionPropagation: params.selectionPropagation ?? {}
 });
 useTreeViewSelection.params = {
   disableSelection: true,
@@ -189,5 +213,6 @@ useTreeViewSelection.params = {
   defaultSelectedItems: true,
   selectedItems: true,
   onSelectedItemsChange: true,
-  onItemSelectionToggle: true
+  onItemSelectionToggle: true,
+  selectionPropagation: true
 };

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

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import type { DefaultizedProps, TreeViewPluginSignature } from '../../models';
+import type { DefaultizedProps } from '@mui/x-internals/types';
+import type { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
+import { TreeViewSelectionPropagation, TreeViewCancellableEventHandler } from '../../../models';
 export interface UseTreeViewSelectionPublicAPI {
     /**
      * Select or deselect an item.
@@ -84,6 +86,23 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
      * @default false
      */
     checkboxSelection?: boolean;
+    /**
+     * When `selectionPropagation.descendants` is set to `true`.
+     *
+     * - Selecting a parent selects all its descendants automatically.
+     * - Deselecting a parent deselects all its descendants automatically.
+     *
+     * When `selectionPropagation.parents` is set to `true`.
+     *
+     * - Selecting all the descendants of a parent selects the parent automatically.
+     * - Deselecting a descendant of a selected parent deselects the parent automatically.
+     *
+     * Only works when `multiSelect` is `true`.
+     * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
+     *
+     * @default { parents: false, descendants: false }
+     */
+    selectionPropagation?: TreeViewSelectionPropagation;
     /**
      * Callback fired when Tree Items are selected/deselected.
      * @param {React.SyntheticEvent} event The DOM event that triggered the change.
@@ -99,9 +118,9 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
      */
     onItemSelectionToggle?: (event: React.SyntheticEvent, itemId: string, isSelected: boolean) => void;
 }
-export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedItems' | 'multiSelect' | 'checkboxSelection'>;
+export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedItems' | 'multiSelect' | 'checkboxSelection' | 'selectionPropagation'>;
 interface UseTreeViewSelectionContextValue {
-    selection: Pick<UseTreeViewSelectionDefaultizedParameters<boolean>, 'multiSelect' | 'checkboxSelection' | 'disableSelection'>;
+    selection: Pick<UseTreeViewSelectionDefaultizedParameters<boolean>, 'multiSelect' | 'checkboxSelection' | 'disableSelection' | 'selectionPropagation'>;
 }
 export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
     params: UseTreeViewSelectionParameters<any>;
@@ -116,4 +135,15 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
         UseTreeViewItemsSignature
     ];
 }>;
+export interface UseTreeItemCheckboxSlotPropsFromSelection {
+    visible?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    tabIndex?: -1;
+    onChange?: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
+}
+declare module '@mui/x-tree-view/useTreeItem' {
+    interface UseTreeItemCheckboxSlotOwnProps extends UseTreeItemCheckboxSlotPropsFromSelection {
+    }
+}
 export {};

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

@@ -1,3 +1,7 @@
+import { TreeViewItemId, TreeViewSelectionPropagation } from '../../../models';
+import { TreeViewInstance } from '../../models';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
+import { UseTreeViewSelectionSignature } from './useTreeViewSelection.types';
 /**
  * Transform the `selectedItems` model to be an array if it was a string or null.
  * @param {string[] | string | null} model The raw model.
@@ -5,5 +9,20 @@
  */
 export declare const convertSelectedItemsToArray: (model: string[] | string | null) => string[];
 export declare const getLookupFromArray: (array: string[]) => {
-    [itemId: string]: boolean;
+    [itemId: string]: true;
 };
+export declare const getAddedAndRemovedItems: ({ instance, oldModel, newModel, }: {
+    instance: TreeViewInstance<[UseTreeViewSelectionSignature]>;
+    oldModel: TreeViewItemId[];
+    newModel: TreeViewItemId[];
+}) => {
+    added: string[];
+    removed: string[];
+};
+export declare const propagateSelection: ({ instance, selectionPropagation, newModel, oldModel, additionalItemsToPropagate, }: {
+    instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewSelectionSignature]>;
+    selectionPropagation: TreeViewSelectionPropagation;
+    newModel: TreeViewItemId[];
+    oldModel: TreeViewItemId[];
+    additionalItemsToPropagate?: TreeViewItemId[];
+}) => string[];

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js

@@ -18,4 +18,99 @@ export const getLookupFromArray = array => {
     lookup[itemId] = true;
   });
   return lookup;
+};
+export const getAddedAndRemovedItems = ({
+  instance,
+  oldModel,
+  newModel
+}) => {
+  const newModelLookup = getLookupFromArray(newModel);
+  return {
+    added: newModel.filter(itemId => !instance.isItemSelected(itemId)),
+    removed: oldModel.filter(itemId => !newModelLookup[itemId])
+  };
+};
+export const propagateSelection = ({
+  instance,
+  selectionPropagation,
+  newModel,
+  oldModel,
+  additionalItemsToPropagate
+}) => {
+  if (!selectionPropagation.descendants && !selectionPropagation.parents) {
+    return newModel;
+  }
+  let shouldRegenerateModel = false;
+  const newModelLookup = getLookupFromArray(newModel);
+  const changes = getAddedAndRemovedItems({
+    instance,
+    newModel,
+    oldModel
+  });
+  additionalItemsToPropagate?.forEach(itemId => {
+    if (newModelLookup[itemId]) {
+      if (!changes.added.includes(itemId)) {
+        changes.added.push(itemId);
+      }
+    } else if (!changes.removed.includes(itemId)) {
+      changes.removed.push(itemId);
+    }
+  });
+  changes.added.forEach(addedItemId => {
+    if (selectionPropagation.descendants) {
+      const selectDescendants = itemId => {
+        if (itemId !== addedItemId) {
+          shouldRegenerateModel = true;
+          newModelLookup[itemId] = true;
+        }
+        instance.getItemOrderedChildrenIds(itemId).forEach(selectDescendants);
+      };
+      selectDescendants(addedItemId);
+    }
+    if (selectionPropagation.parents) {
+      const checkAllDescendantsSelected = itemId => {
+        if (!newModelLookup[itemId]) {
+          return false;
+        }
+        const children = instance.getItemOrderedChildrenIds(itemId);
+        return children.every(checkAllDescendantsSelected);
+      };
+      const selectParents = itemId => {
+        const parentId = instance.getItemMeta(itemId).parentId;
+        if (parentId == null) {
+          return;
+        }
+        const siblings = instance.getItemOrderedChildrenIds(parentId);
+        if (siblings.every(checkAllDescendantsSelected)) {
+          shouldRegenerateModel = true;
+          newModelLookup[parentId] = true;
+          selectParents(parentId);
+        }
+      };
+      selectParents(addedItemId);
+    }
+  });
+  changes.removed.forEach(removedItemId => {
+    if (selectionPropagation.parents) {
+      let parentId = instance.getItemMeta(removedItemId).parentId;
+      while (parentId != null) {
+        if (newModelLookup[parentId]) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[parentId];
+        }
+        parentId = instance.getItemMeta(parentId).parentId;
+      }
+    }
+    if (selectionPropagation.descendants) {
+      const deSelectDescendants = itemId => {
+        if (itemId !== removedItemId) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[itemId];
+        }
+        instance.getItemOrderedChildrenIds(itemId).forEach(deSelectDescendants);
+      };
+      deSelectDescendants(removedItemId);
+    }
+  });
+  return shouldRegenerateModel ? Object.keys(newModelLookup) : newModel;
 };

package/models/items.d.ts

@@ -6,3 +6,7 @@ export type TreeViewBaseItem<R extends {} = {
     children?: TreeViewBaseItem<R>[];
 };
 export type TreeViewItemsReorderingAction = 'reorder-above' | 'reorder-below' | 'make-child' | 'move-to-parent';
+export interface TreeViewSelectionPropagation {
+    descendants?: boolean;
+    parents?: boolean;
+}

package/modern/RichTreeView/RichTreeView.js

@@ -155,7 +155,6 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    indentationAtItemLevel: PropTypes.bool,
     labelEditing: PropTypes.bool
   }),
   /**
@@ -260,6 +259,26 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
   selectedItems: PropTypes.any,
+  /**
+   * When `selectionPropagation.descendants` is set to `true`.
+   *
+   * - Selecting a parent selects all its descendants automatically.
+   * - Deselecting a parent deselects all its descendants automatically.
+   *
+   * When `selectionPropagation.parents` is set to `true`.
+   *
+   * - Selecting all the descendants of a parent selects the parent automatically.
+   * - Deselecting a descendant of a selected parent deselects the parent automatically.
+   *
+   * Only works when `multiSelect` is `true`.
+   * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
+   *
+   * @default { parents: false, descendants: false }
+   */
+  selectionPropagation: PropTypes.shape({
+    descendants: PropTypes.bool,
+    parents: PropTypes.bool
+  }),
   /**
    * The props used for each component slot.
    * @default {}