@mui/x-tree-view 7.4.0 → 7.5.1

package/node/RichTreeView/RichTreeView.js

@@ -140,7 +140,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
 process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
@@ -152,6 +152,11 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
       setItemExpansion: _propTypes.default.func.isRequired
     })
   }),
+  /**
+   * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+   * @default false
+   */
+  checkboxSelection: _propTypes.default.bool,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -216,7 +221,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   isItemDisabled: _propTypes.default.func,
   items: _propTypes.default.array.isRequired,
   /**
-   * If true `ctrl` and `shift` will trigger multiselect.
+   * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false
    */
   multiSelect: _propTypes.default.bool,

package/node/SimpleTreeView/SimpleTreeView.js

@@ -98,7 +98,7 @@ const SimpleTreeView = exports.SimpleTreeView = /*#__PURE__*/React.forwardRef(fu
 process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
@@ -110,6 +110,11 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
       setItemExpansion: _propTypes.default.func.isRequired
     })
   }),
+  /**
+   * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+   * @default false
+   */
+  checkboxSelection: _propTypes.default.bool,
   /**
    * The content of the component.
    */
@@ -152,7 +157,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    */
   id: _propTypes.default.string,
   /**
-   * If true `ctrl` and `shift` will trigger multiselect.
+   * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false
    */
   multiSelect: _propTypes.default.bool,

package/node/TreeItem/TreeItem.js

@@ -41,6 +41,7 @@ const useUtilityClasses = ownerState => {
     focused: ['focused'],
     disabled: ['disabled'],
     iconContainer: ['iconContainer'],
+    checkbox: ['checkbox'],
     label: ['label'],
     groupTransition: ['groupTransition']
   };
@@ -122,7 +123,10 @@ const StyledTreeItemContent = (0, _styles.styled)(_TreeItemContent.TreeItemConte
     // fixes overflow - see https://github.com/mui/material-ui/issues/27372
     minWidth: 0,
     position: 'relative'
-  }, theme.typography.body1)
+  }, theme.typography.body1),
+  [`& .${_treeItemClasses.treeItemClasses.checkbox}`]: {
+    padding: 0
+  }
 }));
 const TreeItemGroup = (0, _styles.styled)(_Collapse.default, {
   name: 'MuiTreeItem',
@@ -305,7 +309,8 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
           focused: classes.focused,
           disabled: classes.disabled,
           iconContainer: classes.iconContainer,
-          label: classes.label
+          label: classes.label,
+          checkbox: classes.checkbox
         },
         label: label,
         itemId: itemId,
@@ -328,7 +333,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
 process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The content of the component.

package/node/TreeItem/TreeItemContent.js

@@ -10,6 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _useTreeItemState = require("./useTreeItemState");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown"];
@@ -36,11 +37,15 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     expanded,
     selected,
     focused,
+    disableSelection,
+    checkboxSelection,
     handleExpansion,
     handleSelection,
+    handleCheckboxSelection,
     preventSelection
   } = (0, _useTreeItemState.useTreeItemState)(itemId);
   const icon = iconProp || expansionIcon || displayIcon;
+  const checkboxRef = React.useRef(null);
   const handleMouseDown = event => {
     preventSelection(event);
     if (onMouseDown) {
@@ -48,8 +53,13 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     }
   };
   const handleClick = event => {
+    if (checkboxRef.current?.contains(event.target)) {
+      return;
+    }
     handleExpansion(event);
-    handleSelection(event);
+    if (!checkboxSelection) {
+      handleSelection(event);
+    }
     if (onClick) {
       onClick(event);
     }
@@ -65,6 +75,13 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: classes.iconContainer,
         children: icon
+      }), checkboxSelection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+        className: classes.checkbox,
+        checked: selected,
+        onChange: handleCheckboxSelection,
+        disabled: disabled || disableSelection,
+        ref: checkboxRef,
+        tabIndex: -1
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: classes.label,
         children: label
@@ -75,7 +92,7 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
 process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/node/TreeItem/treeItemClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getTreeItemUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiTreeItem', slot);
 }
-const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);
+const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label', 'checkbox']);

package/node/TreeItem/useTreeItemState.js

@@ -9,7 +9,9 @@ function useTreeItemState(itemId) {
   const {
     instance,
     selection: {
-      multiSelect
+      multiSelect,
+      checkboxSelection,
+      disableSelection
     }
   } = (0, _useTreeViewContext.useTreeViewContext)();
   const expandable = instance.isItemExpandable(itemId);
@@ -43,10 +45,21 @@ function useTreeItemState(itemId) {
           instance.selectItem(event, itemId, true);
         }
       } else {
-        instance.selectItem(event, itemId);
+        instance.selectItem(event, itemId, false);
       }
     }
   };
+  const handleCheckboxSelection = event => {
+    if (disableSelection || disabled) {
+      return;
+    }
+    const hasShift = event.nativeEvent.shiftKey;
+    if (multiSelect && hasShift) {
+      instance.expandSelectionRange(event, itemId);
+    } else {
+      instance.selectItem(event, itemId, multiSelect, event.target.checked);
+    }
+  };
   const preventSelection = event => {
     if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
       // Prevent text selection
@@ -58,8 +71,11 @@ function useTreeItemState(itemId) {
     expanded,
     selected,
     focused,
+    disableSelection,
+    checkboxSelection,
     handleExpansion,
     handleSelection,
+    handleCheckboxSelection,
     preventSelection
   };
 }

package/node/TreeItem2/TreeItem2.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeItem2Root = exports.TreeItem2Label = exports.TreeItem2IconContainer = exports.TreeItem2GroupTransition = exports.TreeItem2Content = exports.TreeItem2 = void 0;
+exports.TreeItem2Root = exports.TreeItem2Label = exports.TreeItem2IconContainer = exports.TreeItem2GroupTransition = exports.TreeItem2Content = exports.TreeItem2Checkbox = exports.TreeItem2 = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -13,6 +13,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
 var _styles = require("@mui/material/styles");
 var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _utils = require("@mui/base/utils");
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -21,7 +22,8 @@ var _TreeItem = require("../TreeItem");
 var _TreeItem2Icon = require("../TreeItem2Icon");
 var _TreeItem2Provider = require("../TreeItem2Provider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
+const _excluded = ["visible"],
+  _excluded2 = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const TreeItem2Root = exports.TreeItem2Root = (0, _styles.styled)('li', {
@@ -138,6 +140,24 @@ const TreeItem2GroupTransition = exports.TreeItem2GroupTransition = (0, _styles.
   padding: 0,
   paddingLeft: 12
 });
+const TreeItem2Checkbox = exports.TreeItem2Checkbox = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      visible
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, (0, _extends2.default)({}, other, {
+    ref: ref
+  }));
+}), {
+  name: 'MuiTreeItem2',
+  slot: 'Checkbox',
+  overridesResolver: (props, styles) => styles.checkbox
+})({
+  padding: 0
+});
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -150,6 +170,7 @@ const useUtilityClasses = ownerState => {
     focused: ['focused'],
     disabled: ['disabled'],
     iconContainer: ['iconContainer'],
+    checkbox: ['checkbox'],
     label: ['label'],
     groupTransition: ['groupTransition']
   };
@@ -179,11 +200,12 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
       slots = {},
       slotProps = {}
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const {
     getRootProps,
     getContentProps,
     getIconContainerProps,
+    getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
     status
@@ -232,6 +254,14 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     ownerState: {},
     className: classes.label
   });
+  const Checkbox = slots.checkbox ?? TreeItem2Checkbox;
+  const checkboxProps = (0, _utils.useSlotProps)({
+    elementType: Checkbox,
+    getSlotProps: getCheckboxProps,
+    externalSlotProps: slotProps.checkbox,
+    ownerState: {},
+    className: classes.checkbox
+  });
   const GroupTransition = slots.groupTransition ?? undefined;
   const groupTransitionProps = (0, _utils.useSlotProps)({
     elementType: GroupTransition,
@@ -250,7 +280,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
             slots: slots,
             slotProps: slotProps
           })
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelProps))]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, checkboxProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelProps))]
       })), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItem2GroupTransition, (0, _extends2.default)({
         as: GroupTransition
       }, groupTransitionProps))]
@@ -260,7 +290,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
 process.env.NODE_ENV !== "production" ? TreeItem2.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The content of the component.

package/node/TreeItem2/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "TreeItem2", {
     return _TreeItem.TreeItem2;
   }
 });
+Object.defineProperty(exports, "TreeItem2Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem.TreeItem2Checkbox;
+  }
+});
 Object.defineProperty(exports, "TreeItem2Content", {
   enumerable: true,
   get: function () {

package/node/TreeItem2Icon/TreeItem2Icon.js

@@ -53,7 +53,7 @@ function TreeItem2Icon(props) {
 process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The props used for each component slot.

package/node/TreeItem2Provider/TreeItem2Provider.js

@@ -23,7 +23,7 @@ function TreeItem2Provider(props) {
 TreeItem2Provider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
   itemId: _propTypes.default.string.isRequired

package/node/TreeView/TreeView.js

@@ -71,7 +71,7 @@ const TreeView = exports.TreeView = /*#__PURE__*/React.forwardRef(function TreeV
 process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
@@ -83,6 +83,11 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
       setItemExpansion: _propTypes.default.func.isRequired
     })
   }),
+  /**
+   * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+   * @default false
+   */
+  checkboxSelection: _propTypes.default.bool,
   /**
    * The content of the component.
    */
@@ -125,7 +130,7 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   id: _propTypes.default.string,
   /**
-   * If true `ctrl` and `shift` will trigger multiselect.
+   * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false
    */
   multiSelect: _propTypes.default.bool,

package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -5,6 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeItem2Utils = void 0;
 var _useTreeViewContext = require("../../internals/TreeViewProvider/useTreeViewContext");
+const isItemExpandable = reactChildren => {
+  if (Array.isArray(reactChildren)) {
+    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
+  }
+  return Boolean(reactChildren);
+};
 const useTreeItem2Utils = ({
   itemId,
   children
@@ -16,7 +22,7 @@ const useTreeItem2Utils = ({
     }
   } = (0, _useTreeViewContext.useTreeViewContext)();
   const status = {
-    expandable: Boolean(Array.isArray(children) ? children.length : children),
+    expandable: isItemExpandable(children),
     expanded: instance.isItemExpanded(itemId),
     focused: instance.isItemFocused(itemId),
     selected: instance.isItemSelected(itemId),
@@ -51,12 +57,21 @@ const useTreeItem2Utils = ({
         instance.selectItem(event, itemId, true);
       }
     } else {
-      instance.selectItem(event, itemId);
+      instance.selectItem(event, itemId, false);
+    }
+  };
+  const handleCheckboxSelection = event => {
+    const hasShift = event.nativeEvent.shiftKey;
+    if (multiSelect && hasShift) {
+      instance.expandSelectionRange(event, itemId);
+    } else {
+      instance.selectItem(event, itemId, multiSelect, event.target.checked);
     }
   };
   const interactions = {
     handleExpansion,
-    handleSelection
+    handleSelection,
+    handleCheckboxSelection
   };
   return {
     interactions,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.4.0
+ * @mui/x-tree-view v7.5.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -70,7 +70,7 @@ const useTreeViewKeyboardNavigation = ({
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (event.altKey || event.currentTarget !== event.target) {
+    if (event.altKey || event.currentTarget !== event.target.closest('*[role="treeitem"]')) {
       return;
     }
     const ctrlPressed = event.ctrlKey || event.metaKey;
@@ -87,7 +87,7 @@ const useTreeViewKeyboardNavigation = ({
           } else if (params.multiSelect) {
             instance.selectItem(event, itemId, true);
           } else {
-            instance.selectItem(event, itemId);
+            instance.selectItem(event, itemId, false);
           }
           break;
         }
@@ -104,7 +104,7 @@ const useTreeViewKeyboardNavigation = ({
               event.preventDefault();
               instance.selectItem(event, itemId, true);
             } else if (!instance.isItemSelected(itemId)) {
-              instance.selectItem(event, itemId);
+              instance.selectItem(event, itemId, false);
               event.preventDefault();
             }
           }

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

@@ -55,20 +55,28 @@ const useTreeViewSelection = ({
     models.selectedItems.setControlledValue(newSelectedItems);
   };
   const isItemSelected = itemId => selectedItemsMap.has(itemId);
-  const selectItem = (event, itemId, multiple = false) => {
+  const selectItem = (event, itemId, keepExistingSelection, newValue) => {
     if (params.disableSelection) {
       return;
     }
     let newSelected;
-    if (multiple) {
+    if (keepExistingSelection) {
       const cleanSelectedItems = (0, _useTreeViewSelection.convertSelectedItemsToArray)(models.selectedItems.value);
-      if (instance.isItemSelected(itemId)) {
+      const isSelectedBefore = instance.isItemSelected(itemId);
+      if (isSelectedBefore && (newValue === false || newValue == null)) {
         newSelected = cleanSelectedItems.filter(id => id !== itemId);
-      } else {
+      } else if (!isSelectedBefore && (newValue === true || newValue == null)) {
         newSelected = [itemId].concat(cleanSelectedItems);
+      } else {
+        newSelected = cleanSelectedItems;
       }
     } else {
-      newSelected = params.multiSelect ? [itemId] : itemId;
+      // eslint-disable-next-line no-lonely-if
+      if (newValue === false) {
+        newSelected = params.multiSelect ? [] : null;
+      } else {
+        newSelected = params.multiSelect ? [itemId] : itemId;
+      }
     }
     setSelectedItems(event, newSelected);
     lastSelectedItem.current = itemId;
@@ -154,7 +162,9 @@ const useTreeViewSelection = ({
     },
     contextValue: {
       selection: {
-        multiSelect: params.multiSelect
+        multiSelect: params.multiSelect,
+        checkboxSelection: params.checkboxSelection,
+        disableSelection: params.disableSelection
       }
     }
   };
@@ -169,11 +179,13 @@ const DEFAULT_SELECTED_ITEMS = [];
 useTreeViewSelection.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
   disableSelection: params.disableSelection ?? false,
   multiSelect: params.multiSelect ?? false,
+  checkboxSelection: params.checkboxSelection ?? false,
   defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null)
 });
 useTreeViewSelection.params = {
   disableSelection: true,
   multiSelect: true,
+  checkboxSelection: true,
   defaultSelectedItems: true,
   selectedItems: true,
   onSelectedItemsChange: true,

package/node/internals/useTreeView/useTreeViewModels.js

@@ -11,7 +11,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * Implements the same behavior as `useControlled` but for several models.
- * The controlled models are never stored in the state and the state is only updated if the model is not controlled.
+ * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
  */
 const useTreeViewModels = (plugins, props) => {
   const modelsRef = React.useRef({});

package/node/useTreeItem2/useTreeItem2.js

@@ -6,15 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeItem2 = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/base/utils");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
 var _useTreeItem2Utils = require("../hooks/useTreeItem2Utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
     selection: {
-      multiSelect
+      multiSelect,
+      disableSelection,
+      checkboxSelection
     },
     disabledItemsFocusable,
     instance,
@@ -40,6 +45,7 @@ const useTreeItem2 = parameters => {
   });
   const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef);
+  const checkboxRef = React.useRef(null);
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     if (event.defaultMuiPrevented) {
@@ -66,11 +72,13 @@ const useTreeItem2 = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    if (event.defaultMuiPrevented) {
+    if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
     interactions.handleExpansion(event);
-    interactions.handleSelection(event);
+    if (!checkboxSelection) {
+      interactions.handleSelection(event);
+    }
   };
   const createContentHandleMouseDown = otherHandlers => event => {
     otherHandlers.onMouseDown?.(event);
@@ -83,6 +91,16 @@ const useTreeItem2 = parameters => {
       event.preventDefault();
     }
   };
+  const createCheckboxHandleChange = otherHandlers => event => {
+    otherHandlers.onChange?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (disableSelection || status.disabled) {
+      return;
+    }
+    interactions.handleCheckboxSelection(event);
+  };
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _utils.extractEventHandlers)(parameters), (0, _utils.extractEventHandlers)(externalProps));
     let ariaSelected;
@@ -120,6 +138,18 @@ const useTreeItem2 = parameters => {
       status
     });
   };
+  const getCheckboxProps = (externalProps = {}) => {
+    const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
+    return (0, _extends2.default)({}, externalEventHandlers, {
+      visible: checkboxSelection,
+      ref: checkboxRef,
+      checked: status.selected,
+      disabled: disableSelection || status.disabled,
+      tabIndex: -1
+    }, externalProps, {
+      onChange: createCheckboxHandleChange(externalEventHandlers)
+    });
+  };
   const getLabelProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _utils.extractEventHandlers)(parameters), (0, _utils.extractEventHandlers)(externalProps));
     return (0, _extends2.default)({}, externalEventHandlers, {
@@ -145,6 +175,7 @@ const useTreeItem2 = parameters => {
     getContentProps,
     getGroupTransitionProps,
     getIconContainerProps,
+    getCheckboxProps,
     getLabelProps,
     rootRef: handleRootRef,
     status,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.4.0",
+  "version": "7.5.1",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,7 +33,7 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.0",
+    "@babel/runtime": "^7.24.5",
     "@mui/base": "^5.0.0-beta.40",
     "@mui/system": "^5.15.14",
     "@mui/utils": "^5.15.14",