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

package/node/TreeItem/index.js

@@ -5,7 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   TreeItem: true,
-  TreeItemContent: true
+  TreeItemRoot: true,
+  TreeItemContent: true,
+  TreeItemIconContainer: true,
+  TreeItemGroupTransition: true,
+  TreeItemCheckbox: true,
+  TreeItemLabel: true
 };
 Object.defineProperty(exports, "TreeItem", {
   enumerable: true,
@@ -13,10 +18,40 @@ Object.defineProperty(exports, "TreeItem", {
     return _TreeItem.TreeItem;
   }
 });
+Object.defineProperty(exports, "TreeItemCheckbox", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem.TreeItemCheckbox;
+  }
+});
 Object.defineProperty(exports, "TreeItemContent", {
   enumerable: true,
   get: function () {
-    return _TreeItemContent.TreeItemContent;
+    return _TreeItem.TreeItemContent;
+  }
+});
+Object.defineProperty(exports, "TreeItemGroupTransition", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem.TreeItemGroupTransition;
+  }
+});
+Object.defineProperty(exports, "TreeItemIconContainer", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem.TreeItemIconContainer;
+  }
+});
+Object.defineProperty(exports, "TreeItemLabel", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem.TreeItemLabel;
+  }
+});
+Object.defineProperty(exports, "TreeItemRoot", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem.TreeItemRoot;
   }
 });
 var _TreeItem = require("./TreeItem");
@@ -31,17 +66,4 @@ Object.keys(_treeItemClasses).forEach(function (key) {
       return _treeItemClasses[key];
     }
   });
-});
-var _useTreeItemState = require("./useTreeItemState");
-Object.keys(_useTreeItemState).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useTreeItemState[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useTreeItemState[key];
-    }
-  });
-});
-var _TreeItemContent = require("./TreeItemContent");
+});

package/node/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js}

@@ -1,11 +1,12 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeItem2DragAndDropOverlay = TreeItem2DragAndDropOverlay;
+exports.TreeItemDragAndDropOverlay = TreeItemDragAndDropOverlay;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,8 +14,8 @@ var _styles = require("@mui/material/styles");
 var _system = require("@mui/system");
 var _zeroStyled = require("../internals/zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
-const TreeItem2DragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
-  name: 'MuiTreeItem2DragAndDropOverlay',
+const TreeItemDragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
+  name: 'MuiTreeItemDragAndDropOverlay',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
   shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'action'
@@ -63,13 +64,13 @@ const TreeItem2DragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
     }
   }]
 }));
-function TreeItem2DragAndDropOverlay(props) {
+function TreeItemDragAndDropOverlay(props) {
   if (props.action == null) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItem2DragAndDropOverlayRoot, (0, _extends2.default)({}, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemDragAndDropOverlayRoot, (0, _extends2.default)({}, props));
 }
-process.env.NODE_ENV !== "production" ? TreeItem2DragAndDropOverlay.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItemDragAndDropOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |

package/node/TreeItemDragAndDropOverlay/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TreeItemDragAndDropOverlay", {
+  enumerable: true,
+  get: function () {
+    return _TreeItemDragAndDropOverlay.TreeItemDragAndDropOverlay;
+  }
+});
+var _TreeItemDragAndDropOverlay = require("./TreeItemDragAndDropOverlay");

package/node/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js}

@@ -1,11 +1,12 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeItem2Icon = TreeItem2Icon;
+exports.TreeItemIcon = TreeItemIcon;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -14,7 +15,7 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
-function TreeItem2Icon(props) {
+function TreeItemIcon(props) {
   const {
     slots,
     slotProps,
@@ -50,7 +51,7 @@ function TreeItem2Icon(props) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({}, iconProps));
 }
-process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItemIcon.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |

package/node/TreeItemIcon/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TreeItemIcon", {
+  enumerable: true,
+  get: function () {
+    return _TreeItemIcon.TreeItemIcon;
+  }
+});
+var _TreeItemIcon = require("./TreeItemIcon");

package/node/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js}

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeItem2LabelInput = void 0;
+exports.TreeItemLabelInput = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _zeroStyled = require("../internals/zero-styled");
 /**
  * @ignore - internal component.
  */
-const TreeItem2LabelInput = exports.TreeItem2LabelInput = (0, _zeroStyled.styled)('input', {
-  name: 'MuiTreeItem2',
+const TreeItemLabelInput = exports.TreeItemLabelInput = (0, _zeroStyled.styled)('input', {
+  name: 'MuiTreeItem',
   slot: 'LabelInput',
   overridesResolver: (props, styles) => styles.labelInput
 })(({

package/node/TreeItemLabelInput/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TreeItemLabelInput", {
+  enumerable: true,
+  get: function () {
+    return _TreeItemLabelInput.TreeItemLabelInput;
+  }
+});
+var _TreeItemLabelInput = require("./TreeItemLabelInput");

package/node/{TreeItem2Provider/TreeItem2Provider.js → TreeItemProvider/TreeItemProvider.js}

@@ -4,10 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeItem2Provider = TreeItem2Provider;
+exports.TreeItemProvider = TreeItemProvider;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TreeViewProvider = require("../internals/TreeViewProvider");
-function TreeItem2Provider(props) {
+/**
+ * @ignore - internal component.
+ */
+function TreeItemProvider(props) {
   const {
     children,
     itemId
@@ -22,7 +25,7 @@ function TreeItem2Provider(props) {
     instance
   });
 }
-TreeItem2Provider.propTypes = {
+TreeItemProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |

package/node/TreeItemProvider/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TreeItemProvider", {
+  enumerable: true,
+  get: function () {
+    return _TreeItemProvider.TreeItemProvider;
+  }
+});
+var _TreeItemProvider = require("./TreeItemProvider");

package/node/hooks/index.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "useTreeItem2Utils", {
+Object.defineProperty(exports, "useTreeItemUtils", {
   enumerable: true,
   get: function () {
-    return _useTreeItem2Utils.useTreeItem2Utils;
+    return _useTreeItemUtils.useTreeItemUtils;
   }
 });
 Object.defineProperty(exports, "useTreeViewApiRef", {
@@ -16,4 +16,4 @@ Object.defineProperty(exports, "useTreeViewApiRef", {
   }
 });
 var _useTreeViewApiRef = require("./useTreeViewApiRef");
-var _useTreeItem2Utils = require("./useTreeItem2Utils");
+var _useTreeItemUtils = require("./useTreeItemUtils");

package/node/hooks/useTreeItemUtils/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useTreeItemUtils", {
+  enumerable: true,
+  get: function () {
+    return _useTreeItemUtils.useTreeItemUtils;
+  }
+});
+var _useTreeItemUtils = require("./useTreeItemUtils");

package/node/hooks/{useTreeItem2Utils/useTreeItem2Utils.js → useTreeItemUtils/useTreeItemUtils.js}

@@ -1,18 +1,19 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeItem2Utils = void 0;
+exports.useTreeItemUtils = void 0;
 var _TreeViewProvider = require("../../internals/TreeViewProvider");
 var _useTreeViewLabel = require("../../internals/plugins/useTreeViewLabel");
 var _plugins = require("../../internals/utils/plugins");
 /**
- * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
+ * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
  */
 
 /**
- * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
+ * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
  */
 
 const isItemExpandable = reactChildren => {
@@ -21,7 +22,7 @@ const isItemExpandable = reactChildren => {
   }
   return Boolean(reactChildren);
 };
-const useTreeItem2Utils = ({
+const useTreeItemUtils = ({
   itemId,
   children
 }) => {
@@ -144,4 +145,4 @@ const useTreeItem2Utils = ({
     publicAPI
   };
 };
-exports.useTreeItem2Utils = useTreeItem2Utils;
+exports.useTreeItemUtils = useTreeItemUtils;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.22.1
+ * @mui/x-tree-view v8.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -19,18 +19,6 @@ Object.defineProperty(exports, "unstable_resetCleanupTracking", {
     return _useInstanceEventHandler.unstable_resetCleanupTracking;
   }
 });
-var _TreeView = require("./TreeView");
-Object.keys(_TreeView).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TreeView[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _TreeView[key];
-    }
-  });
-});
 var _SimpleTreeView = require("./SimpleTreeView");
 Object.keys(_SimpleTreeView).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -67,19 +55,7 @@ Object.keys(_TreeItem).forEach(function (key) {
     }
   });
 });
-var _TreeItem2 = require("./TreeItem2");
-Object.keys(_TreeItem2).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TreeItem2[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _TreeItem2[key];
-    }
-  });
-});
-var _useTreeItem = require("./useTreeItem2");
+var _useTreeItem = require("./useTreeItem");
 Object.keys(_useTreeItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -91,51 +67,51 @@ Object.keys(_useTreeItem).forEach(function (key) {
     }
   });
 });
-var _TreeItem2Icon = require("./TreeItem2Icon");
-Object.keys(_TreeItem2Icon).forEach(function (key) {
+var _TreeItemIcon = require("./TreeItemIcon");
+Object.keys(_TreeItemIcon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TreeItem2Icon[key]) return;
+  if (key in exports && exports[key] === _TreeItemIcon[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _TreeItem2Icon[key];
+      return _TreeItemIcon[key];
     }
   });
 });
-var _TreeItem2Provider = require("./TreeItem2Provider");
-Object.keys(_TreeItem2Provider).forEach(function (key) {
+var _TreeItemProvider = require("./TreeItemProvider");
+Object.keys(_TreeItemProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TreeItem2Provider[key]) return;
+  if (key in exports && exports[key] === _TreeItemProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _TreeItem2Provider[key];
+      return _TreeItemProvider[key];
     }
   });
 });
-var _TreeItem2DragAndDropOverlay = require("./TreeItem2DragAndDropOverlay");
-Object.keys(_TreeItem2DragAndDropOverlay).forEach(function (key) {
+var _TreeItemDragAndDropOverlay = require("./TreeItemDragAndDropOverlay");
+Object.keys(_TreeItemDragAndDropOverlay).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TreeItem2DragAndDropOverlay[key]) return;
+  if (key in exports && exports[key] === _TreeItemDragAndDropOverlay[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _TreeItem2DragAndDropOverlay[key];
+      return _TreeItemDragAndDropOverlay[key];
     }
   });
 });
-var _TreeItem2LabelInput = require("./TreeItem2LabelInput");
-Object.keys(_TreeItem2LabelInput).forEach(function (key) {
+var _TreeItemLabelInput = require("./TreeItemLabelInput");
+Object.keys(_TreeItemLabelInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TreeItem2LabelInput[key]) return;
+  if (key in exports && exports[key] === _TreeItemLabelInput[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _TreeItem2LabelInput[key];
+      return _TreeItemLabelInput[key];
     }
   });
 });

package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -71,8 +71,7 @@ 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]);
@@ -199,8 +198,7 @@ const useTreeViewItems = ({
     contextValue: {
       items: {
         onItemClick: params.onItemClick,
-        disabledItemsFocusable: params.disabledItemsFocusable,
-        indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
+        disabledItemsFocusable: params.disabledItemsFocusable
       }
     }
   };

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

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewSelectionItemPlugin = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _TreeViewProvider = require("../../TreeViewProvider");
+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
+  };
+}
+const useTreeViewSelectionItemPlugin = ({
+  props
+}) => {
+  const {
+    itemId
+  } = props;
+  const {
+    instance,
+    selection: {
+      disableSelection,
+      checkboxSelection,
+      selectionPropagation
+    }
+  } = (0, _TreeViewProvider.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 (0, _extends2.default)({
+          visible: checkboxSelection,
+          disabled: disableSelection || status.disabled,
+          tabIndex: -1,
+          onChange: handleChange
+        }, checkboxStatus);
+      }
+    }
+  };
+};
+exports.useTreeViewSelectionItemPlugin = useTreeViewSelectionItemPlugin;

package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _tree = require("../../utils/tree");
 var _useTreeViewSelection = require("./useTreeViewSelection.utils");
+var _useTreeViewSelection2 = require("./useTreeViewSelection.itemPlugin");
 const useTreeViewSelection = ({
   instance,
   params,
@@ -28,30 +29,47 @@ 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 = (0, _useTreeViewSelection.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 = (0, _useTreeViewSelection.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 = ({
@@ -82,7 +100,10 @@ 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 = {};
   };
@@ -171,12 +192,14 @@ const useTreeViewSelection = ({
       selection: {
         multiSelect: params.multiSelect,
         checkboxSelection: params.checkboxSelection,
-        disableSelection: params.disableSelection
+        disableSelection: params.disableSelection,
+        selectionPropagation: params.selectionPropagation
       }
     }
   };
 };
 exports.useTreeViewSelection = useTreeViewSelection;
+useTreeViewSelection.itemPlugin = _useTreeViewSelection2.useTreeViewSelectionItemPlugin;
 useTreeViewSelection.models = {
   selectedItems: {
     getDefaultValue: params => params.defaultSelectedItems
@@ -189,7 +212,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,
@@ -198,5 +222,6 @@ useTreeViewSelection.params = {
   defaultSelectedItems: true,
   selectedItems: true,
   onSelectedItemsChange: true,
-  onItemSelectionToggle: true
+  onItemSelectionToggle: true,
+  selectionPropagation: true
 };