@mui/x-tree-view 7.4.0 → 7.5.0

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

@@ -4,7 +4,14 @@ import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 export interface UseTreeViewSelectionInstance {
     isItemSelected: (itemId: string) => boolean;
-    selectItem: (event: React.SyntheticEvent, itemId: string, keepExistingSelection?: boolean) => void;
+    /**
+     * Select or deselect an item.
+     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {string} itemId The id of the item to select or deselect.
+     * @param {boolean} keepExistingSelection If `true`, don't remove the other selected items.
+     * @param {boolean | undefined} newValue The new selection status of the item. If not defined, the new state will be the opposite of the current state.
+     */
+    selectItem: (event: React.SyntheticEvent, itemId: string, keepExistingSelection: boolean, newValue?: boolean) => void;
     /**
      * Select all the navigable items in the tree.
      * @param {React.SyntheticEvent} event The event source of the callback.
@@ -55,10 +62,15 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
      */
     selectedItems?: TreeViewSelectionValue<Multiple>;
     /**
-     * If true `ctrl` and `shift` will trigger multiselect.
+     * If `true`, `ctrl` and `shift` will trigger multiselect.
      * @default false
      */
     multiSelect?: Multiple;
+    /**
+     * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+     * @default false
+     */
+    checkboxSelection?: boolean;
     /**
      * Callback fired when tree items are selected/deselected.
      * @param {React.SyntheticEvent} event The event source of the callback
@@ -74,9 +86,9 @@ 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'>;
+export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedItems' | 'multiSelect' | 'checkboxSelection'>;
 interface UseTreeViewSelectionContextValue {
-    selection: Pick<UseTreeViewSelectionDefaultizedParameters<boolean>, 'multiSelect'>;
+    selection: Pick<UseTreeViewSelectionDefaultizedParameters<boolean>, 'multiSelect' | 'checkboxSelection' | 'disableSelection'>;
 }
 export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
     params: UseTreeViewSelectionParameters<any>;

package/modern/RichTreeView/RichTreeView.js

@@ -143,6 +143,11 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
       setItemExpansion: PropTypes.func.isRequired
     })
   }),
+  /**
+   * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+   * @default false
+   */
+  checkboxSelection: PropTypes.bool,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -207,7 +212,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   isItemDisabled: PropTypes.func,
   items: PropTypes.array.isRequired,
   /**
-   * If true `ctrl` and `shift` will trigger multiselect.
+   * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false
    */
   multiSelect: PropTypes.bool,

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -101,6 +101,11 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
       setItemExpansion: PropTypes.func.isRequired
     })
   }),
+  /**
+   * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+   * @default false
+   */
+  checkboxSelection: PropTypes.bool,
   /**
    * The content of the component.
    */
@@ -143,7 +148,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    */
   id: PropTypes.string,
   /**
-   * If true `ctrl` and `shift` will trigger multiselect.
+   * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false
    */
   multiSelect: PropTypes.bool,

package/modern/TreeItem/TreeItem.js

@@ -32,6 +32,7 @@ const useUtilityClasses = ownerState => {
     focused: ['focused'],
     disabled: ['disabled'],
     iconContainer: ['iconContainer'],
+    checkbox: ['checkbox'],
     label: ['label'],
     groupTransition: ['groupTransition']
   };
@@ -113,7 +114,10 @@ const StyledTreeItemContent = styled(TreeItemContent, {
     // fixes overflow - see https://github.com/mui/material-ui/issues/27372
     minWidth: 0,
     position: 'relative'
-  }, theme.typography.body1)
+  }, theme.typography.body1),
+  [`& .${treeItemClasses.checkbox}`]: {
+    padding: 0
+  }
 }));
 const TreeItemGroup = styled(Collapse, {
   name: 'MuiTreeItem',
@@ -296,7 +300,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
           focused: classes.focused,
           disabled: classes.disabled,
           iconContainer: classes.iconContainer,
-          label: classes.label
+          label: classes.label,
+          checkbox: classes.checkbox
         },
         label: label,
         itemId: itemId,

package/modern/TreeItem/TreeItemContent.js

@@ -4,6 +4,7 @@ const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import Checkbox from '@mui/material/Checkbox';
 import { useTreeItemState } from './useTreeItemState';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -27,11 +28,15 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
     expanded,
     selected,
     focused,
+    disableSelection,
+    checkboxSelection,
     handleExpansion,
     handleSelection,
+    handleCheckboxSelection,
     preventSelection
   } = useTreeItemState(itemId);
   const icon = iconProp || expansionIcon || displayIcon;
+  const checkboxRef = React.useRef(null);
   const handleMouseDown = event => {
     preventSelection(event);
     if (onMouseDown) {
@@ -39,8 +44,13 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
     }
   };
   const handleClick = event => {
+    if (checkboxRef.current?.contains(event.target)) {
+      return;
+    }
     handleExpansion(event);
-    handleSelection(event);
+    if (!checkboxSelection) {
+      handleSelection(event);
+    }
     if (onClick) {
       onClick(event);
     }
@@ -56,6 +66,13 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
       children: [/*#__PURE__*/_jsx("div", {
         className: classes.iconContainer,
         children: icon
+      }), checkboxSelection && /*#__PURE__*/_jsx(Checkbox, {
+        className: classes.checkbox,
+        checked: selected,
+        onChange: handleCheckboxSelection,
+        disabled: disabled || disableSelection,
+        ref: checkboxRef,
+        tabIndex: -1
       }), /*#__PURE__*/_jsx("div", {
         className: classes.label,
         children: label

package/modern/TreeItem/treeItemClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getTreeItemUtilityClass(slot) {
   return generateUtilityClass('MuiTreeItem', slot);
 }
-export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);
+export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label', 'checkbox']);

package/modern/TreeItem/useTreeItemState.js

@@ -3,7 +3,9 @@ export function useTreeItemState(itemId) {
   const {
     instance,
     selection: {
-      multiSelect
+      multiSelect,
+      checkboxSelection,
+      disableSelection
     }
   } = useTreeViewContext();
   const expandable = instance.isItemExpandable(itemId);
@@ -37,10 +39,21 @@ export 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
@@ -52,8 +65,11 @@ export function useTreeItemState(itemId) {
     expanded,
     selected,
     focused,
+    disableSelection,
+    checkboxSelection,
     handleExpansion,
     handleSelection,
+    handleCheckboxSelection,
     preventSelection
   };
 }

package/modern/TreeItem2/TreeItem2.js

@@ -1,12 +1,14 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
+const _excluded = ["visible"],
+  _excluded2 = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
+import MuiCheckbox from '@mui/material/Checkbox';
 import { useSlotProps } from '@mui/base/utils';
 import { shouldForwardProp } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
@@ -129,6 +131,24 @@ export const TreeItem2GroupTransition = styled(Collapse, {
   padding: 0,
   paddingLeft: 12
 });
+export const TreeItem2Checkbox = styled( /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      visible
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(MuiCheckbox, _extends({}, other, {
+    ref: ref
+  }));
+}), {
+  name: 'MuiTreeItem2',
+  slot: 'Checkbox',
+  overridesResolver: (props, styles) => styles.checkbox
+})({
+  padding: 0
+});
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -141,6 +161,7 @@ const useUtilityClasses = ownerState => {
     focused: ['focused'],
     disabled: ['disabled'],
     iconContainer: ['iconContainer'],
+    checkbox: ['checkbox'],
     label: ['label'],
     groupTransition: ['groupTransition']
   };
@@ -170,11 +191,12 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
       slots = {},
       slotProps = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
   const {
     getRootProps,
     getContentProps,
     getIconContainerProps,
+    getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
     status
@@ -223,6 +245,14 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     ownerState: {},
     className: classes.label
   });
+  const Checkbox = slots.checkbox ?? TreeItem2Checkbox;
+  const checkboxProps = useSlotProps({
+    elementType: Checkbox,
+    getSlotProps: getCheckboxProps,
+    externalSlotProps: slotProps.checkbox,
+    ownerState: {},
+    className: classes.checkbox
+  });
   const GroupTransition = slots.groupTransition ?? undefined;
   const groupTransitionProps = useSlotProps({
     elementType: GroupTransition,
@@ -241,7 +271,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
             slots: slots,
             slotProps: slotProps
           })
-        })), /*#__PURE__*/_jsx(Label, _extends({}, labelProps))]
+        })), /*#__PURE__*/_jsx(Checkbox, _extends({}, checkboxProps)), /*#__PURE__*/_jsx(Label, _extends({}, labelProps))]
       })), children && /*#__PURE__*/_jsx(TreeItem2GroupTransition, _extends({
         as: GroupTransition
       }, groupTransitionProps))]

package/modern/TreeItem2/index.js

@@ -1 +1 @@
-export { TreeItem2, TreeItem2Root, TreeItem2Content, TreeItem2IconContainer, TreeItem2GroupTransition, TreeItem2Label } from './TreeItem2';
+export { TreeItem2, TreeItem2Root, TreeItem2Content, TreeItem2IconContainer, TreeItem2GroupTransition, TreeItem2Checkbox, TreeItem2Label } from './TreeItem2';

package/modern/TreeView/TreeView.js

@@ -74,6 +74,11 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
       setItemExpansion: PropTypes.func.isRequired
     })
   }),
+  /**
+   * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+   * @default false
+   */
+  checkboxSelection: PropTypes.bool,
   /**
    * The content of the component.
    */
@@ -116,7 +121,7 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   id: PropTypes.string,
   /**
-   * If true `ctrl` and `shift` will trigger multiselect.
+   * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false
    */
   multiSelect: PropTypes.bool,

package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -45,12 +45,21 @@ export 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/modern/index.js

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

package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -61,7 +61,7 @@ export 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;
@@ -78,7 +78,7 @@ export const useTreeViewKeyboardNavigation = ({
           } else if (params.multiSelect) {
             instance.selectItem(event, itemId, true);
           } else {
-            instance.selectItem(event, itemId);
+            instance.selectItem(event, itemId, false);
           }
           break;
         }
@@ -95,7 +95,7 @@ export 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/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -46,20 +46,28 @@ export 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 = 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;
@@ -145,7 +153,9 @@ export const useTreeViewSelection = ({
     },
     contextValue: {
       selection: {
-        multiSelect: params.multiSelect
+        multiSelect: params.multiSelect,
+        checkboxSelection: params.checkboxSelection,
+        disableSelection: params.disableSelection
       }
     }
   };
@@ -159,11 +169,13 @@ const DEFAULT_SELECTED_ITEMS = [];
 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)
 });
 useTreeViewSelection.params = {
   disableSelection: true,
   multiSelect: true,
+  checkboxSelection: true,
   defaultSelectedItems: true,
   selectedItems: true,
   onSelectedItemsChange: true,

package/modern/useTreeItem2/useTreeItem2.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
 import { extractEventHandlers } from '@mui/base/utils';
 import useForkRef from '@mui/utils/useForkRef';
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
@@ -7,7 +8,9 @@ export const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
     selection: {
-      multiSelect
+      multiSelect,
+      disableSelection,
+      checkboxSelection
     },
     disabledItemsFocusable,
     instance,
@@ -33,6 +36,7 @@ export const useTreeItem2 = parameters => {
   });
   const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const handleRootRef = useForkRef(rootRef, pluginRootRef);
+  const checkboxRef = React.useRef(null);
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     if (event.defaultMuiPrevented) {
@@ -59,11 +63,13 @@ export 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);
@@ -76,6 +82,16 @@ export 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 = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
     let ariaSelected;
@@ -113,6 +129,18 @@ export const useTreeItem2 = parameters => {
       status
     });
   };
+  const getCheckboxProps = (externalProps = {}) => {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    return _extends({}, externalEventHandlers, {
+      visible: checkboxSelection,
+      ref: checkboxRef,
+      checked: status.selected,
+      disabled: disableSelection || status.disabled,
+      tabIndex: -1
+    }, externalProps, {
+      onChange: createCheckboxHandleChange(externalEventHandlers)
+    });
+  };
   const getLabelProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
     return _extends({}, externalEventHandlers, {
@@ -138,6 +166,7 @@ export const useTreeItem2 = parameters => {
     getContentProps,
     getGroupTransitionProps,
     getIconContainerProps,
+    getCheckboxProps,
     getLabelProps,
     rootRef: handleRootRef,
     status,

package/node/RichTreeView/RichTreeView.js

@@ -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

@@ -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,

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

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']);