@mui/x-tree-view 7.4.0 → 7.5.0

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

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/TreeView/TreeView.js

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

@@ -51,12 +51,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.0
  *
  * @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/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.0",
   "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",

package/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/useTreeItem2/useTreeItem2.types.d.ts

@@ -54,6 +54,15 @@ export interface UseTreeItem2LabelSlotOwnProps {
     children: React.ReactNode;
 }
 export type UseTreeItem2LabelSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2LabelSlotOwnProps;
+export interface UseTreeItem2CheckboxSlotOwnProps {
+    visible: boolean;
+    checked: boolean;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    disabled: boolean;
+    ref: React.RefObject<HTMLButtonElement>;
+    tabIndex: -1;
+}
+export type UseTreeItem2CheckboxSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2CheckboxSlotOwnProps;
 export interface UseTreeItem2GroupTransitionSlotOwnProps {
     unmountOnExit: boolean;
     in: boolean;
@@ -88,6 +97,12 @@ export interface UseTreeItem2ReturnValue<TPlugins extends readonly TreeViewAnyPl
      * @returns {UseTreeItem2LabelSlotProps<ExternalProps>} Props that should be spread on the label slot
      */
     getLabelProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2LabelSlotProps<ExternalProps>;
+    /**
+     * Resolver for the checkbox slot's props.
+     * @param {ExternalProps} externalProps Additional props for the checkbox slot
+     * @returns {UseTreeItem2CheckboxSlotProps<ExternalProps>} Props that should be spread on the checkbox slot
+     */
+    getCheckboxProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2CheckboxSlotProps<ExternalProps>;
     /**
      * Resolver for the iconContainer slot's props.
      * @param {ExternalProps} externalProps Additional props for the iconContainer slot