[tree view] Add support for checkbox selection

docs/pages/x/api/tree-view/tree-view.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "checkboxSelection": { "type": { "name": "bool" } },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "className": { "type": { "name": "string" } },

docs/translations/api-docs/tree-view/tree-view.json

@@ -1,6 +1,11 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "checkboxSelection": {
+      "description": "If <code>true</code>, the tree view renders a checkbox at the left of its label that allows selecting it.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
     "children": {
       "description": "The content of the component.",
       "deprecated": "",
@@ -67,7 +72,7 @@
       "typeDescriptions": {}
     },
     "multiSelect": {
-      "description": "If true <code>ctrl</code> and <code>shift</code> will trigger multiselect.",
+      "description": "If <code>true</code>, <code>ctrl</code> and <code>shift</code> will trigger multiselect.",
       "deprecated": "",
       "typeDescriptions": {}
     },

packages/x-tree-view/src/TreeItem/TreeItemContent.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import Checkbox from '@mui/material/Checkbox';
 import { useTreeItem } from './useTreeItem';
 
 export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement> {
@@ -76,12 +77,14 @@ const TreeItemContent = React.forwardRef(function TreeItemContent(
     expanded,
     selected,
     focused,
+    checkboxSelection,
     handleExpansion,
     handleSelection,
     preventSelection,
   } = useTreeItem(nodeId);
 
   const icon = iconProp || expansionIcon || displayIcon;
+  const checkboxRef = React.useRef<HTMLButtonElement>(null);
 
   const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
     preventSelection(event);
@@ -92,14 +95,25 @@ const TreeItemContent = React.forwardRef(function TreeItemContent(
   };
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (checkboxRef.current?.contains(event.target as HTMLElement)) {
+      return;
+    }
+
     handleExpansion(event);
-    handleSelection(event);
+
+    if (!checkboxSelection) {
+      handleSelection(event);
+    }
 
     if (onClick) {
       onClick(event);
     }
   };
 
+  const handleCheckboxSelectionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    handleSelection(event);
+  };
+
   return (
     /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
     <div
@@ -115,6 +129,10 @@ const TreeItemContent = React.forwardRef(function TreeItemContent(
       ref={ref}
     >
       <div className={classes.iconContainer}>{icon}</div>
+      {checkboxSelection && (
+        <Checkbox checked={selected} onChange={handleCheckboxSelectionChange} ref={checkboxRef} />
+      )}
+
       <div className={classes.label}>{label}</div>
     </div>
   );

packages/x-tree-view/src/TreeItem/useTreeItem.ts

@@ -3,7 +3,7 @@ import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewCon
 import { DefaultTreeViewPlugins } from '../internals/plugins';
 
 export function useTreeItem(nodeId: string) {
-  const { instance, multiSelect } = useTreeViewContext<DefaultTreeViewPlugins>();
+  const { instance, multiSelect, checkboxSelection } = useTreeViewContext<DefaultTreeViewPlugins>();
 
   const expandable = instance ? instance.isNodeExpandable(nodeId) : false;
   const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
@@ -26,16 +26,21 @@ export function useTreeItem(nodeId: string) {
     }
   };
 
-  const handleSelection = (event: React.MouseEvent<HTMLDivElement>) => {
+  const handleSelection = (event: React.ChangeEvent | React.MouseEvent) => {
     if (instance && !disabled) {
       if (!focused) {
         instance.focusNode(event, nodeId);
       }
 
-      const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+      const nativeEvent = (event.type === 'change'
+        ? event.nativeEvent
+        : event) as unknown as React.MouseEvent;
+
+      const multiple =
+        multiSelect && (nativeEvent.shiftKey || nativeEvent.ctrlKey || nativeEvent.metaKey);
 
       if (multiple) {
-        if (event.shiftKey) {
+        if (nativeEvent.shiftKey) {
           instance.selectRange(event, { end: nodeId });
         } else {
           instance.selectNode(event, nodeId, true);
@@ -58,6 +63,7 @@ export function useTreeItem(nodeId: string) {
     expanded,
     selected,
     focused,
+    checkboxSelection,
     handleExpansion,
     handleSelection,
     preventSelection,

packages/x-tree-view/src/TreeView/TreeView.tsx

@@ -63,6 +63,7 @@ const TreeView = React.forwardRef(function TreeView<
     defaultSelected,
     selected,
     multiSelect,
+    checkboxSelection,
     onNodeSelect,
     id,
     defaultCollapseIcon,
@@ -84,6 +85,7 @@ const TreeView = React.forwardRef(function TreeView<
     defaultSelected,
     selected,
     multiSelect,
+    checkboxSelection,
     onNodeSelect,
     id,
     defaultCollapseIcon,
@@ -117,6 +119,11 @@ TreeView.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * 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.
    */
@@ -183,7 +190,7 @@ 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,

packages/x-tree-view/src/internals/TreeViewProvider/TreeViewProvider.types.ts

@@ -5,6 +5,7 @@ export interface TreeViewContextValue<TPlugins extends readonly TreeViewAnyPlugi
   treeId: string | undefined;
   instance: TreeViewInstance<TPlugins> | null;
   multiSelect: boolean;
+  checkboxSelection: boolean;
   disabledItemsFocusable: boolean;
   icons: {
     defaultCollapseIcon: React.ReactNode;

packages/x-tree-view/src/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.ts

@@ -15,6 +15,7 @@ export const useTreeViewContextValueBuilder: TreeViewPlugin<
       treeId,
       instance: instance as TreeViewInstance<any>,
       multiSelect: params.multiSelect,
+      checkboxSelection: params.checkboxSelection,
       disabledItemsFocusable: params.disabledItemsFocusable,
       icons: {
         defaultCollapseIcon: params.defaultCollapseIcon,

packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts

@@ -206,5 +206,6 @@ useTreeViewSelection.getDefaultizedParams = (params) => ({
   ...params,
   disableSelection: params.disableSelection ?? false,
   multiSelect: params.multiSelect ?? false,
+  checkboxSelection: params.checkboxSelection ?? false,
   defaultSelected: params.defaultSelected ?? (params.multiSelect ? DEFAULT_SELECTED : null),
 });

packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts

@@ -33,10 +33,15 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
    */
   selected?: 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/unselected.
    * @param {React.SyntheticEvent} event The event source of the callback
@@ -51,7 +56,7 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
 
 export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<
   UseTreeViewSelectionParameters<Multiple>,
-  'disableSelection' | 'defaultSelected' | 'multiSelect'
+  'disableSelection' | 'defaultSelected' | 'multiSelect' | 'checkboxSelection'
 >;
 
 export type UseTreeViewSelectionSignature<Multiple extends boolean | undefined> =