@mui/x-tree-view 9.10.0 → 9.11.0

package/internals/plugins/selection/selectors.mjs

@@ -17,6 +17,49 @@ const selectedItemsMapSelector = createSelectorMemoized(selectedItemsSelector, s
   return selectedItemsMap;
 });
 const isItemSelectableSelector = createSelector((state, itemId) => state.itemMetaLookup[itemId]?.selectable ?? true);
+const isItemSelectedSelector = createSelector(selectedItemsMapSelector, (selectedItemsMap, itemId) => selectedItemsMap.has(itemId));
+const canItemBeSelectedSelector = createSelector(itemsSelectors.isItemDisabled, isItemSelectableSelector, state => !state.disableSelection, (isItemDisabled, isItemSelectable, isSelectionEnabled, _itemId) => isSelectionEnabled && !isItemDisabled && isItemSelectable);
+const propagationRulesSelector = createSelector(state => state.selectionPropagation);
+const itemSelectionStatusSelector = createSelector((state, itemId) => {
+  if (isItemSelectedSelector(state, itemId)) {
+    return 'selected';
+  }
+
+  // Only the descendants can make an unselected item `indeterminate`, so leaves can be resolved
+  // without traversing the tree.
+  if (itemsSelectors.itemOrderedChildrenIds(state, itemId).length === 0) {
+    return 'unselected';
+  }
+  let hasSelectedDescendant = false;
+  let hasUnSelectedDescendant = false;
+  const traverseDescendants = itemToTraverseId => {
+    if (itemToTraverseId !== itemId) {
+      if (canItemBeSelectedSelector(state, itemToTraverseId)) {
+        if (isItemSelectedSelector(state, itemToTraverseId)) {
+          hasSelectedDescendant = true;
+        } else {
+          hasUnSelectedDescendant = true;
+        }
+      }
+    }
+    itemsSelectors.itemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
+  };
+  traverseDescendants(itemId);
+  const shouldSelectBasedOnDescendants = propagationRulesSelector(state).parents;
+  if (shouldSelectBasedOnDescendants) {
+    if (hasSelectedDescendant && hasUnSelectedDescendant) {
+      return 'indeterminate';
+    }
+    if (hasSelectedDescendant && !hasUnSelectedDescendant) {
+      return 'selected';
+    }
+    return 'unselected';
+  }
+  if (hasSelectedDescendant) {
+    return 'indeterminate';
+  }
+  return 'unselected';
+});
 export const selectionSelectors = {
   /**
    * Gets the selected items as provided to the component.
@@ -45,11 +88,21 @@ export const selectionSelectors = {
   /**
    * Gets the selection propagation rules.
    */
-  propagationRules: createSelector(state => state.selectionPropagation),
+  propagationRules: propagationRulesSelector,
   /**
    * Checks whether an item is selected.
    */
-  isItemSelected: createSelector(selectedItemsMapSelector, (selectedItemsMap, itemId) => selectedItemsMap.has(itemId)),
+  isItemSelected: isItemSelectedSelector,
+  /**
+   * Gets the selection status of an item.
+   * An item that is not selected is `indeterminate` when some of its selectable descendants are selected.
+   * When `selectionPropagation.parents` is enabled, an item whose selectable descendants are all selected is `selected`.
+   */
+  itemSelectionStatus: itemSelectionStatusSelector,
+  /**
+   * Checks whether an item is indeterminate (it is not selected but some of its selectable descendants are).
+   */
+  isItemIndeterminate: createSelector(itemSelectionStatusSelector, (selectionStatus, _itemId) => selectionStatus === 'indeterminate'),
   /**
    * Checks whether the selection feature is enabled for an item.
    * Returns `true` when selection is enabled on the Tree View and the item is selectable (even if the item is disabled).
@@ -58,7 +111,7 @@ export const selectionSelectors = {
   /**
    * Checks whether an item can be selected (if selection is enabled, if the item is not disabled, and if the item is selectable).
    */
-  canItemBeSelected: createSelector(itemsSelectors.isItemDisabled, isItemSelectableSelector, state => !state.disableSelection, (isItemDisabled, isItemSelectable, isSelectionEnabled, _itemId) => isSelectionEnabled && !isItemDisabled && isItemSelectable),
+  canItemBeSelected: canItemBeSelectedSelector,
   /**
    * Checks whether an item is selectable based on the `isItemSelectionDisabled` prop.
    */

package/models/items.d.mts

@@ -11,4 +11,5 @@ export type TreeViewItemsReorderingAction = 'reorder-above' | 'reorder-below' |
 export interface TreeViewSelectionPropagation {
   descendants?: boolean;
   parents?: boolean;
-}
+}
+export type TreeViewItemSelectionStatus = 'selected' | 'indeterminate' | 'unselected';

package/models/items.d.ts

@@ -11,4 +11,5 @@ export type TreeViewItemsReorderingAction = 'reorder-above' | 'reorder-below' |
 export interface TreeViewSelectionPropagation {
   descendants?: boolean;
   parents?: boolean;
-}
+}
+export type TreeViewItemSelectionStatus = 'selected' | 'indeterminate' | 'unselected';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "9.10.0",
+  "version": "9.11.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
   "license": "MIT",
@@ -33,12 +33,12 @@
   "dependencies": {
     "@babel/runtime": "^7.29.7",
     "@base-ui/utils": "^0.3.1",
-    "@mui/utils": "^9.2.0",
+    "@mui/utils": "^9.3.0",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "^9.10.0"
+    "@mui/x-internals": "^9.11.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/useTreeItem/useTreeItem.types.d.mts

@@ -98,6 +98,10 @@ export interface UseTreeItemStatus {
   expanded: boolean;
   focused: boolean;
   selected: boolean;
+  /**
+   * `true` when the item is not selected but some of its selectable descendants are.
+   */
+  indeterminate?: boolean;
   disabled: boolean;
   editing: boolean;
   editable: boolean;

package/useTreeItem/useTreeItem.types.d.ts

@@ -98,6 +98,10 @@ export interface UseTreeItemStatus {
   expanded: boolean;
   focused: boolean;
   selected: boolean;
+  /**
+   * `true` when the item is not selected but some of its selectable descendants are.
+   */
+  indeterminate?: boolean;
   disabled: boolean;
   editing: boolean;
   editable: boolean;