@mui/x-tree-view 7.22.1 → 8.0.0-alpha.1

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

@@ -0,0 +1,74 @@
+import { UseTreeViewLabelSignature } from './useTreeViewLabel.types';
+import { TreeViewRootSelector } from '../../utils/selectors';
+/**
+ * Check if an item is editable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {object} params The parameters.
+ * @param {TreeViewItemId} params.itemId The id of the item to check.
+ * @param {((item: any) => boolean) | boolean} params.isItemEditable The function to determine if an item is editable.
+ * @returns {boolean} `true` if the item is editable, `false` otherwise.
+ */
+export declare const selectorIsItemEditable: ((state: any, args: any) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        itemId: string;
+        isItemEditable: ((item: any) => boolean) | boolean;
+    }, resultFuncArgs_1: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        itemId: string;
+        isItemEditable: ((item: any) => boolean) | boolean;
+    }, resultFuncArgs_1: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [(_: any, args: {
+        itemId: string;
+        isItemEditable: ((item: any) => boolean) | boolean;
+    }) => {
+        itemId: string;
+        isItemEditable: ((item: any) => boolean) | boolean;
+    }, (state: any, args: any) => import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if an item is being edited.
+ * @param {TreeViewState<[UseTreeViewLabelSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is being edited, `false` otherwise.
+ */
+export declare const selectorIsItemBeingEdited: ((state: any, itemId: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        editedItemId: string | null;
+    }, resultFuncArgs_1: string) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        editedItemId: string | null;
+    }, resultFuncArgs_1: string) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [TreeViewRootSelector<UseTreeViewLabelSignature>, (_: any, itemId: string) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js

@@ -0,0 +1,26 @@
+import { createSelector } from "../../utils/selectors.js";
+import { selectorItemModel } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+const selectorTreeViewLabelState = state => state.label;
+
+/**
+ * Check if an item is editable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {object} params The parameters.
+ * @param {TreeViewItemId} params.itemId The id of the item to check.
+ * @param {((item: any) => boolean) | boolean} params.isItemEditable The function to determine if an item is editable.
+ * @returns {boolean} `true` if the item is editable, `false` otherwise.
+ */
+export const selectorIsItemEditable = createSelector([(_, args) => args, (state, args) => selectorItemModel(state, args.itemId)], (args, itemModel) => {
+  if (!itemModel || !args.isItemEditable) {
+    return false;
+  }
+  return typeof args.isItemEditable === 'function' ? args.isItemEditable(itemModel) : true;
+});
+
+/**
+ * Check if an item is being edited.
+ * @param {TreeViewState<[UseTreeViewLabelSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is being edited, `false` otherwise.
+ */
+export const selectorIsItemBeingEdited = createSelector([selectorTreeViewLabelState, (_, itemId) => itemId], (labelState, itemId) => labelState.editedItemId === itemId);

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.
@@ -17,29 +18,6 @@ export interface UseTreeViewLabelInstance extends UseTreeViewLabelPublicAPI {
      * @returns {void}.
      */
     setEditedItemId: (itemId: TreeViewItemId | null) => void;
-    /**
-     * Checks if an item is being edited or not.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean}.
-     */
-    isItemBeingEdited: (itemId: TreeViewItemId) => boolean;
-    /**
-     * Checks if an item is being edited or not.
-     * Purely internal use, used to avoid unnecessarily calling `updateItemLabel` twice.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean}.
-     */
-    isItemBeingEditedRef: (itemId: TreeViewItemId) => boolean;
-    /**
-     * Determines if a given item is editable.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean} `true` if the item is editable.
-     */
-    isItemEditable: (itemId: TreeViewItemId) => boolean;
-    /**
-     * Set to `true` if the Tree View is editable.
-     */
-    isTreeViewEditable: boolean;
 }
 export interface UseTreeViewLabelParameters<R extends {}> {
     /**
@@ -61,7 +39,12 @@ export interface UseTreeViewLabelParameters<R extends {}> {
 }
 export type UseTreeViewLabelDefaultizedParameters<R extends {}> = DefaultizedProps<UseTreeViewLabelParameters<R>, 'isItemEditable'>;
 export interface UseTreeViewLabelState {
-    editedItemId: string | null;
+    label: {
+        editedItemId: string | null;
+    };
+}
+export interface UseTreeViewLabelContextValue {
+    label: Pick<UseTreeViewLabelDefaultizedParameters<any>, 'isItemEditable'>;
 }
 export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
     params: UseTreeViewLabelParameters<any>;
@@ -69,12 +52,13 @@ export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
     publicAPI: UseTreeViewLabelPublicAPI;
     instance: UseTreeViewLabelInstance;
     state: UseTreeViewLabelState;
+    contextValue: UseTreeViewLabelContextValue;
     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,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useTreeViewContext } from "../../TreeViewProvider/index.js";
+import { selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectorIsItemSelected } from "./useTreeViewSelection.selectors.js";
+function getCheckboxStatus({
+  itemId,
+  store,
+  selectionPropagation,
+  selected
+}) {
+  if (selected) {
+    return {
+      indeterminate: false,
+      checked: true
+    };
+  }
+  const children = selectorItemOrderedChildrenIds(store.value, itemId);
+  if (children.length === 0) {
+    return {
+      indeterminate: false,
+      checked: false
+    };
+  }
+  let hasSelectedDescendant = false;
+  let hasUnSelectedDescendant = false;
+  const traverseDescendants = itemToTraverseId => {
+    if (itemToTraverseId !== itemId) {
+      if (selectorIsItemSelected(store.value, itemToTraverseId)) {
+        hasSelectedDescendant = true;
+      } else {
+        hasUnSelectedDescendant = true;
+      }
+    }
+    selectorItemOrderedChildrenIds(store.value, itemToTraverseId).forEach(traverseDescendants);
+  };
+  traverseDescendants(itemId);
+  return {
+    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant && !selected,
+    checked: selectionPropagation.parents ? hasSelectedDescendant : selected
+  };
+}
+export const useTreeViewSelectionItemPlugin = ({
+  props
+}) => {
+  const {
+    itemId
+  } = props;
+  const {
+    store,
+    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({
+          store,
+          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,51 +1,66 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
-import { convertSelectedItemsToArray, getLookupFromArray } from "./useTreeViewSelection.utils.js";
+import { convertSelectedItemsToArray, propagateSelection, getAddedAndRemovedItems, getLookupFromArray, createSelectedItemsMap } from "./useTreeViewSelection.utils.js";
+import { selectorIsItemSelected } from "./useTreeViewSelection.selectors.js";
+import { useTreeViewSelectionItemPlugin } from "./useTreeViewSelection.itemPlugin.js";
 export const useTreeViewSelection = ({
-  instance,
+  store,
   params,
   models
 }) => {
   const lastSelectedItem = React.useRef(null);
   const lastSelectedRange = React.useRef({});
-  const selectedItemsMap = React.useMemo(() => {
-    const temp = new Map();
-    if (Array.isArray(models.selectedItems.value)) {
-      models.selectedItems.value.forEach(id => {
-        temp.set(id, true);
+  useEnhancedEffect(() => {
+    store.update(prevState => _extends({}, prevState, {
+      selection: {
+        selectedItemsMap: createSelectedItemsMap(models.selectedItems.value)
+      }
+    }));
+  }, [store, models.selectedItems.value]);
+  const setSelectedItems = (event, newModel, additionalItemsToPropagate) => {
+    let cleanModel;
+    if (params.multiSelect && (params.selectionPropagation.descendants || params.selectionPropagation.parents)) {
+      cleanModel = propagateSelection({
+        store,
+        selectionPropagation: params.selectionPropagation,
+        newModel: newModel,
+        oldModel: models.selectedItems.value,
+        additionalItemsToPropagate
       });
-    } else if (models.selectedItems.value != null) {
-      temp.set(models.selectedItems.value, true);
+    } else {
+      cleanModel = newModel;
     }
-    return temp;
-  }, [models.selectedItems.value]);
-  const setSelectedItems = (event, newSelectedItems) => {
     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);
-        });
-        removedItems.forEach(itemId => {
-          params.onItemSelectionToggle(event, itemId, false);
+        const changes = getAddedAndRemovedItems({
+          store,
+          newModel: cleanModel,
+          oldModel: models.selectedItems.value
         });
-      } 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 = ({
     event,
     itemId,
@@ -58,7 +73,7 @@ export const useTreeViewSelection = ({
     let newSelected;
     if (keepExistingSelection) {
       const cleanSelectedItems = convertSelectedItemsToArray(models.selectedItems.value);
-      const isSelectedBefore = instance.isItemSelected(itemId);
+      const isSelectedBefore = selectorIsItemSelected(store.value, itemId);
       if (isSelectedBefore && (shouldBeSelected === false || shouldBeSelected == null)) {
         newSelected = cleanSelectedItems.filter(id => id !== itemId);
       } else if (!isSelectedBefore && (shouldBeSelected === true || shouldBeSelected == null)) {
@@ -68,13 +83,16 @@ export const useTreeViewSelection = ({
       }
     } else {
       // eslint-disable-next-line no-lonely-if
-      if (shouldBeSelected === false || shouldBeSelected == null && instance.isItemSelected(itemId)) {
+      if (shouldBeSelected === false || shouldBeSelected == null && selectorIsItemSelected(store.value, itemId)) {
         newSelected = params.multiSelect ? [] : null;
       } else {
         newSelected = params.multiSelect ? [itemId] : itemId;
       }
     }
-    setSelectedItems(event, newSelected);
+    setSelectedItems(event, newSelected,
+    // If shouldBeSelected === selectorIsItemSelected(store, 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 = {};
   };
@@ -92,7 +110,7 @@ export const useTreeViewSelection = ({
 
     // Add to the model the items that are part of the new range and not already part of the model.
     const selectedItemsLookup = getLookupFromArray(newSelectedItems);
-    const range = getNonDisabledItemsInRange(instance, start, end);
+    const range = getNonDisabledItemsInRange(store.value, start, end);
     const itemsToAddToModel = range.filter(id => !selectedItemsLookup[id]);
     newSelectedItems = newSelectedItems.concat(itemsToAddToModel);
     setSelectedItems(event, newSelectedItems);
@@ -100,21 +118,21 @@ export const useTreeViewSelection = ({
   };
   const expandSelectionRange = (event, itemId) => {
     if (lastSelectedItem.current != null) {
-      const [start, end] = findOrderInTremauxTree(instance, itemId, lastSelectedItem.current);
+      const [start, end] = findOrderInTremauxTree(store.value, itemId, lastSelectedItem.current);
       selectRange(event, [start, end]);
     }
   };
   const selectRangeFromStartToItem = (event, itemId) => {
-    selectRange(event, [getFirstNavigableItem(instance), itemId]);
+    selectRange(event, [getFirstNavigableItem(store.value), itemId]);
   };
   const selectRangeFromItemToEnd = (event, itemId) => {
-    selectRange(event, [itemId, getLastNavigableItem(instance)]);
+    selectRange(event, [itemId, getLastNavigableItem(store.value)]);
   };
   const selectAllNavigableItems = event => {
     if (params.disableSelection || !params.multiSelect) {
       return;
     }
-    const navigableItems = getAllNavigableItems(instance);
+    const navigableItems = getAllNavigableItems(store.value);
     setSelectedItems(event, navigableItems);
     lastSelectedRange.current = getLookupFromArray(navigableItems);
   };
@@ -143,6 +161,17 @@ export const useTreeViewSelection = ({
     }
     setSelectedItems(event, newSelectedItems);
   };
+  const pluginContextValue = React.useMemo(() => ({
+    selection: {
+      multiSelect: params.multiSelect,
+      checkboxSelection: params.checkboxSelection,
+      disableSelection: params.disableSelection,
+      selectionPropagation: {
+        descendants: params.selectionPropagation.descendants,
+        parents: params.selectionPropagation.parents
+      }
+    }
+  }), [params.multiSelect, params.checkboxSelection, params.disableSelection, params.selectionPropagation.descendants, params.selectionPropagation.parents]);
   return {
     getRootProps: () => ({
       'aria-multiselectable': params.multiSelect
@@ -151,7 +180,6 @@ export const useTreeViewSelection = ({
       selectItem
     },
     instance: {
-      isItemSelected,
       selectItem,
       selectAllNavigableItems,
       expandSelectionRange,
@@ -159,28 +187,35 @@ export const useTreeViewSelection = ({
       selectRangeFromItemToEnd,
       selectItemFromArrowNavigation
     },
-    contextValue: {
-      selection: {
-        multiSelect: params.multiSelect,
-        checkboxSelection: params.checkboxSelection,
-        disableSelection: params.disableSelection
-      }
-    }
+    contextValue: pluginContextValue
   };
 };
+useTreeViewSelection.itemPlugin = useTreeViewSelectionItemPlugin;
 useTreeViewSelection.models = {
   selectedItems: {
     getDefaultValue: params => params.defaultSelectedItems
   }
 };
 const DEFAULT_SELECTED_ITEMS = [];
+const EMPTY_SELECTION_PROPAGATION = {};
 useTreeViewSelection.getDefaultizedParams = ({
   params
 }) => _extends({}, params, {
   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 ?? EMPTY_SELECTION_PROPAGATION
+});
+useTreeViewSelection.getInitialState = params => ({
+  selection: {
+    selectedItemsMap: createSelectedItemsMap(params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems)
+  }
+});
+useTreeViewSelection.getInitialState = params => ({
+  selection: {
+    selectedItemsMap: createSelectedItemsMap(params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems)
+  }
 });
 useTreeViewSelection.params = {
   disableSelection: true,
@@ -189,5 +224,6 @@ useTreeViewSelection.params = {
   defaultSelectedItems: true,
   selectedItems: true,
   onSelectedItemsChange: true,
-  onItemSelectionToggle: true
+  onItemSelectionToggle: true,
+  selectionPropagation: true
 };

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

@@ -0,0 +1,32 @@
+import { TreeViewRootSelector } from '../../utils/selectors';
+import { UseTreeViewSelectionSignature } from './useTreeViewSelection.types';
+/**
+ * Check if an item is selected.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is selected, `false` otherwise.
+ */
+export declare const selectorIsItemSelected: ((state: any, itemId: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        selectedItemsMap: Map<string, true>;
+    }, resultFuncArgs_1: string) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        selectedItemsMap: Map<string, true>;
+    }, resultFuncArgs_1: string) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [TreeViewRootSelector<UseTreeViewSelectionSignature>, (_: any, itemId: string) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js

@@ -0,0 +1,9 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectorTreeViewSelectionState = state => state.selection;
+
+/**
+ * Check if an item is selected.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is selected, `false` otherwise.
+ */
+export const selectorIsItemSelected = createSelector([selectorTreeViewSelectionState, (_, itemId) => itemId], (selectionState, itemId) => selectionState.selectedItemsMap.has(itemId));

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.
@@ -19,12 +21,6 @@ export interface UseTreeViewSelectionPublicAPI {
     }) => 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 all the navigable items in the tree.
      * @param {React.SyntheticEvent} event The DOM event that triggered the change.
@@ -84,6 +80,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 +112,14 @@ 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'>;
+export interface UseTreeViewSelectionState {
+    selection: {
+        selectedItemsMap: Map<string, true>;
+    };
+}
 interface UseTreeViewSelectionContextValue {
-    selection: Pick<UseTreeViewSelectionDefaultizedParameters<boolean>, 'multiSelect' | 'checkboxSelection' | 'disableSelection'>;
+    selection: Pick<UseTreeViewSelectionDefaultizedParameters<boolean>, 'multiSelect' | 'checkboxSelection' | 'disableSelection' | 'selectionPropagation'>;
 }
 export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
     params: UseTreeViewSelectionParameters<any>;
@@ -110,10 +128,22 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
     publicAPI: UseTreeViewSelectionPublicAPI;
     contextValue: UseTreeViewSelectionContextValue;
     modelNames: 'selectedItems';
+    state: UseTreeViewSelectionState;
     dependencies: [
         UseTreeViewItemsSignature,
         UseTreeViewExpansionSignature,
         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,9 +1,28 @@
+import { TreeViewItemId, TreeViewSelectionPropagation } from '../../../models';
+import { TreeViewUsedStore } from '../../models';
+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.
  * @returns {string[]} The converted model.
  */
 export declare const convertSelectedItemsToArray: (model: string[] | string | null) => string[];
+export declare const createSelectedItemsMap: (selectedItems: string | string[] | null) => Map<string, true>;
 export declare const getLookupFromArray: (array: string[]) => {
-    [itemId: string]: boolean;
+    [itemId: string]: true;
 };
+export declare const getAddedAndRemovedItems: ({ store, oldModel, newModel, }: {
+    store: TreeViewUsedStore<UseTreeViewSelectionSignature>;
+    oldModel: TreeViewItemId[];
+    newModel: TreeViewItemId[];
+}) => {
+    added: string[];
+    removed: string[];
+};
+export declare const propagateSelection: ({ store, selectionPropagation, newModel, oldModel, additionalItemsToPropagate, }: {
+    store: TreeViewUsedStore<UseTreeViewSelectionSignature>;
+    selectionPropagation: TreeViewSelectionPropagation;
+    newModel: TreeViewItemId[];
+    oldModel: TreeViewItemId[];
+    additionalItemsToPropagate?: TreeViewItemId[];
+}) => string[];