@mui/x-tree-view 7.3.1 → 7.5.0

package/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/hooks/useTreeItem2Utils/useTreeItem2Utils.d.ts

@@ -3,6 +3,7 @@ import type { UseTreeItem2Status } from '../../useTreeItem2';
 interface UseTreeItem2Interactions {
     handleExpansion: (event: React.MouseEvent) => void;
     handleSelection: (event: React.MouseEvent) => void;
+    handleCheckboxSelection: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 interface UseTreeItem2UtilsReturnValue {
     interactions: UseTreeItem2Interactions;

package/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/index.js

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

package/internals/models/plugin.d.ts

@@ -104,12 +104,6 @@ export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature>
      */
     $$signature: TSignature;
 };
-export type TreeViewUsedPublicAPI<TSignature extends TreeViewAnyPluginSignature> = TSignature['publicAPI'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'publicAPI'> & {
-    /**
-     * Private property only defined in TypeScript to be able to access the plugin signature from the publicAPI object.
-     */
-    $$signature: TSignature;
-};
 type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = TSignature['state'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'state'>;
 type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = {
     [K in keyof Models]: Omit<Models[K], 'setValue'>;

package/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/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/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';
@@ -121,7 +123,7 @@ export const TreeItem2IconContainer = styled('div', {
   }
 });
 export const TreeItem2GroupTransition = styled(Collapse, {
-  name: 'MuiTreeItem2GroupTransition',
+  name: 'MuiTreeItem2',
   slot: 'GroupTransition',
   overridesResolver: (props, styles) => styles.groupTransition
 })({
@@ -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.3.1
+ * @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,