@mui/x-tree-view 7.4.0 → 7.5.1

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