@mui/x-tree-view 9.10.1 → 9.11.0

package/internals/plugins/selection/itemPlugin.js

@@ -8,40 +8,6 @@ var _store = require("@mui/x-internals/store");
 var _TreeViewProvider = require("../../TreeViewProvider");
 var _selectors = require("../items/selectors");
 var _selectors2 = require("./selectors");
-const selectorCheckboxSelectionStatus = (0, _store.createSelector)((state, itemId) => {
-  if (_selectors2.selectionSelectors.isItemSelected(state, itemId)) {
-    return 'checked';
-  }
-  let hasSelectedDescendant = false;
-  let hasUnSelectedDescendant = false;
-  const traverseDescendants = itemToTraverseId => {
-    if (itemToTraverseId !== itemId) {
-      if (_selectors2.selectionSelectors.canItemBeSelected(state, itemToTraverseId)) {
-        if (_selectors2.selectionSelectors.isItemSelected(state, itemToTraverseId)) {
-          hasSelectedDescendant = true;
-        } else {
-          hasUnSelectedDescendant = true;
-        }
-      }
-    }
-    _selectors.itemsSelectors.itemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
-  };
-  traverseDescendants(itemId);
-  const shouldSelectBasedOnDescendants = _selectors2.selectionSelectors.propagationRules(state).parents;
-  if (shouldSelectBasedOnDescendants) {
-    if (hasSelectedDescendant && hasUnSelectedDescendant) {
-      return 'indeterminate';
-    }
-    if (hasSelectedDescendant && !hasUnSelectedDescendant) {
-      return 'checked';
-    }
-    return 'empty';
-  }
-  if (hasSelectedDescendant) {
-    return 'indeterminate';
-  }
-  return 'empty';
-});
 const useSelectionItemPlugin = ({
   props
 }) => {
@@ -56,7 +22,7 @@ const useSelectionItemPlugin = ({
   const canItemBeSelected = (0, _store.useStore)(store, _selectors2.selectionSelectors.canItemBeSelected, itemId);
   const isItemDisabled = (0, _store.useStore)(store, _selectors.itemsSelectors.isItemDisabled, itemId);
   const isItemSelectable = (0, _store.useStore)(store, _selectors2.selectionSelectors.isItemSelectable, itemId);
-  const selectionStatus = (0, _store.useStore)(store, selectorCheckboxSelectionStatus, itemId);
+  const selectionStatus = (0, _store.useStore)(store, _selectors2.selectionSelectors.itemSelectionStatus, itemId);
 
   // An item is "inherently not selectable" when disabled or excluded via isItemSelectionDisabled,
   // regardless of the global disableSelection flag. Such items must not have aria-checked.
@@ -69,7 +35,7 @@ const useSelectionItemPlugin = ({
         if (isItemInherentlyNotSelectable) {
           // - if the tree contains nodes that are not selectable, aria-checked is not present on those nodes.
           ariaChecked = undefined;
-        } else if (selectionStatus === 'checked') {
+        } else if (selectionStatus === 'selected') {
           // - each selected node has aria-checked set to true.
           ariaChecked = true;
         } else if (selectionStatus === 'indeterminate') {
@@ -104,7 +70,7 @@ const useSelectionItemPlugin = ({
           onChange: handleChange,
           visible: isCheckboxSelectionEnabled && isFeatureEnabledForItem,
           disabled: !canItemBeSelected,
-          checked: selectionStatus === 'checked',
+          checked: selectionStatus === 'selected',
           indeterminate: selectionStatus === 'indeterminate'
         };
       }

package/internals/plugins/selection/itemPlugin.mjs

@@ -1,41 +1,7 @@
-import { createSelector, useStore } from '@mui/x-internals/store';
+import { useStore } from '@mui/x-internals/store';
 import { useTreeViewContext } from "../../TreeViewProvider/index.mjs";
 import { itemsSelectors } from "../items/selectors.mjs";
 import { selectionSelectors } from "./selectors.mjs";
-const selectorCheckboxSelectionStatus = createSelector((state, itemId) => {
-  if (selectionSelectors.isItemSelected(state, itemId)) {
-    return 'checked';
-  }
-  let hasSelectedDescendant = false;
-  let hasUnSelectedDescendant = false;
-  const traverseDescendants = itemToTraverseId => {
-    if (itemToTraverseId !== itemId) {
-      if (selectionSelectors.canItemBeSelected(state, itemToTraverseId)) {
-        if (selectionSelectors.isItemSelected(state, itemToTraverseId)) {
-          hasSelectedDescendant = true;
-        } else {
-          hasUnSelectedDescendant = true;
-        }
-      }
-    }
-    itemsSelectors.itemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
-  };
-  traverseDescendants(itemId);
-  const shouldSelectBasedOnDescendants = selectionSelectors.propagationRules(state).parents;
-  if (shouldSelectBasedOnDescendants) {
-    if (hasSelectedDescendant && hasUnSelectedDescendant) {
-      return 'indeterminate';
-    }
-    if (hasSelectedDescendant && !hasUnSelectedDescendant) {
-      return 'checked';
-    }
-    return 'empty';
-  }
-  if (hasSelectedDescendant) {
-    return 'indeterminate';
-  }
-  return 'empty';
-});
 export const useSelectionItemPlugin = ({
   props
 }) => {
@@ -50,7 +16,7 @@ export const useSelectionItemPlugin = ({
   const canItemBeSelected = useStore(store, selectionSelectors.canItemBeSelected, itemId);
   const isItemDisabled = useStore(store, itemsSelectors.isItemDisabled, itemId);
   const isItemSelectable = useStore(store, selectionSelectors.isItemSelectable, itemId);
-  const selectionStatus = useStore(store, selectorCheckboxSelectionStatus, itemId);
+  const selectionStatus = useStore(store, selectionSelectors.itemSelectionStatus, itemId);
 
   // An item is "inherently not selectable" when disabled or excluded via isItemSelectionDisabled,
   // regardless of the global disableSelection flag. Such items must not have aria-checked.
@@ -63,7 +29,7 @@ export const useSelectionItemPlugin = ({
         if (isItemInherentlyNotSelectable) {
           // - if the tree contains nodes that are not selectable, aria-checked is not present on those nodes.
           ariaChecked = undefined;
-        } else if (selectionStatus === 'checked') {
+        } else if (selectionStatus === 'selected') {
           // - each selected node has aria-checked set to true.
           ariaChecked = true;
         } else if (selectionStatus === 'indeterminate') {
@@ -98,7 +64,7 @@ export const useSelectionItemPlugin = ({
           onChange: handleChange,
           visible: isCheckboxSelectionEnabled && isFeatureEnabledForItem,
           disabled: !canItemBeSelected,
-          checked: selectionStatus === 'checked',
+          checked: selectionStatus === 'selected',
           indeterminate: selectionStatus === 'indeterminate'
         };
       }

package/internals/plugins/selection/selectors.d.mts

@@ -1,3 +1,4 @@
+import type { TreeViewItemSelectionStatus } from "../../../models/index.mjs";
 import type { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.mjs";
 export declare const selectionSelectors: {
   /**
@@ -32,6 +33,16 @@ export declare const selectionSelectors: {
    * Checks whether an item is selected.
    */
   isItemSelected: (args_0: MinimalTreeViewState<any, any>, itemId: string) => boolean;
+  /**
+   * 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: (state: MinimalTreeViewState<any, any>, itemId: string) => TreeViewItemSelectionStatus;
+  /**
+   * Checks whether an item is indeterminate (it is not selected but some of its selectable descendants are).
+   */
+  isItemIndeterminate: (args_0: MinimalTreeViewState<any, any>, _itemId: string) => boolean;
   /**
    * 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).

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

@@ -1,3 +1,4 @@
+import type { TreeViewItemSelectionStatus } from "../../../models/index.js";
 import type { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
 export declare const selectionSelectors: {
   /**
@@ -32,6 +33,16 @@ export declare const selectionSelectors: {
    * Checks whether an item is selected.
    */
   isItemSelected: (args_0: MinimalTreeViewState<any, any>, itemId: string) => boolean;
+  /**
+   * 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: (state: MinimalTreeViewState<any, any>, itemId: string) => TreeViewItemSelectionStatus;
+  /**
+   * Checks whether an item is indeterminate (it is not selected but some of its selectable descendants are).
+   */
+  isItemIndeterminate: (args_0: MinimalTreeViewState<any, any>, _itemId: string) => boolean;
   /**
    * 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).

package/internals/plugins/selection/selectors.js

@@ -23,6 +23,49 @@ const selectedItemsMapSelector = (0, _store.createSelectorMemoized)(selectedItem
   return selectedItemsMap;
 });
 const isItemSelectableSelector = (0, _store.createSelector)((state, itemId) => state.itemMetaLookup[itemId]?.selectable ?? true);
+const isItemSelectedSelector = (0, _store.createSelector)(selectedItemsMapSelector, (selectedItemsMap, itemId) => selectedItemsMap.has(itemId));
+const canItemBeSelectedSelector = (0, _store.createSelector)(_selectors.itemsSelectors.isItemDisabled, isItemSelectableSelector, state => !state.disableSelection, (isItemDisabled, isItemSelectable, isSelectionEnabled, _itemId) => isSelectionEnabled && !isItemDisabled && isItemSelectable);
+const propagationRulesSelector = (0, _store.createSelector)(state => state.selectionPropagation);
+const itemSelectionStatusSelector = (0, _store.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 (_selectors.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;
+        }
+      }
+    }
+    _selectors.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';
+});
 const selectionSelectors = exports.selectionSelectors = {
   /**
    * Gets the selected items as provided to the component.
@@ -51,11 +94,21 @@ const selectionSelectors = exports.selectionSelectors = {
   /**
    * Gets the selection propagation rules.
    */
-  propagationRules: (0, _store.createSelector)(state => state.selectionPropagation),
+  propagationRules: propagationRulesSelector,
   /**
    * Checks whether an item is selected.
    */
-  isItemSelected: (0, _store.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: (0, _store.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).
@@ -64,7 +117,7 @@ const selectionSelectors = exports.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: (0, _store.createSelector)(_selectors.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/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.1",
+  "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.1"
+    "@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;