@mui/x-tree-view 7.3.1 → 7.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.3.1",
+  "version": "7.5.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,12 +33,12 @@
     "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",
     "@types/react-transition-group": "^4.4.10",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5"
   },

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;
@@ -105,7 +121,7 @@ export const useTreeItem2 = parameters => {
     });
   };
   const getContentProps = (externalProps = {}) => {
-    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    const externalEventHandlers = extractEventHandlers(externalProps);
     return _extends({}, externalEventHandlers, externalProps, {
       ref: contentRef,
       onClick: createContentHandleClick(externalEventHandlers),
@@ -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, {
@@ -120,11 +148,11 @@ export const useTreeItem2 = parameters => {
     }, externalProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
-    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    const externalEventHandlers = extractEventHandlers(externalProps);
     return _extends({}, externalEventHandlers, externalProps);
   };
   const getGroupTransitionProps = (externalProps = {}) => {
-    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    const externalEventHandlers = extractEventHandlers(externalProps);
     return _extends({}, externalEventHandlers, {
       unmountOnExit: true,
       component: 'ul',
@@ -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